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内 容 简 介 


本 书 主要 介绍 了 页 面前 端 技术 的 开发 ， 即 常 说 的 “HTML+CSS+JavaScript”。 现 在 的 Web 设计 理念 较 之 于 前 两 年 ， 
已 经 发 生 了 很 大 的 改变 ，CSS 比 传统 的 属性 标签 使 页 面 变 得 更 漂亮 ， 而 将 来 ， 页 面 中 要 求 的 不 仅仅 是 美观 ， 甚 至 是 越 来 
越 多 的 互动 功能 ，JavaScript 即 是 目前 最 流行 的 页 面 脚本 语言 。 

2009 年 ， 互 联网 巨头 Google 公司 在 全 球 推广 Google Chrome 浏览 器 ， 正 如 Chrome 浏览 器 本 身 ， “今天 ， 我 们 日 
常生 活 所 用 的 互联 网 不 再 仅仅 是 网 页 ， 而 是 应 用 程序 。” 本 书 针对 当前 网 页 的 开发 ， 详 细 介绍 了 CSS 的 使 用 法 则 ， 不 
仅 如 此 ， 本 书 同 时 注重 于 JavaScript 的 使 用 ， 目 的 就 在 于 不 仅 着 眼 于 今天 最 流行 、 最 成 熟 的 技术 ， 更 要 把 握 明 天 页 面 开 
发 的 趋势 。 

本 书 从 最 基本 的 HTML 标签 讲 起 ， 适 用 于 Web 开发 的 初学 者 , 而 对 于 有 一 定 Web 前 端 开发 基础 的 读者 , 也 有 一 定 
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随 着 网 站 技术 的 进一步 发 展 ， 各 个 部 门 对 网 站 开发 技术 的 要 求 日 益 提高 ， 综 观 人 才 市 场 ， 各 企 事 
业 单 位 对 网 站 开发 工作 人 员 的 需求 也 大 大 增加 。 但 是 网 站 建设 作为 一 项 综合 性 的 技能 ， 对 很 多 计算 机 
技术 都 有 着 很 高 的 要 求 。 网 站 开发 工作 包括 市 场 需求 研究 、 网 站 策划 、 网 页 平面 设计 、 网 站 程序 开发 、 
数据 库 设 计 以 及 网 站 的 推广 运作 等 ， 可 以 系统 掌握 这 些 知识 的 网 络 工程 师 相 对 较 少 。 

如 此 诸多 方面 的 知识 ， 使 得 很 多 初学 者 往往 都 会 感到 十 分 困惑 ， 不 知道 各 项 技术 之 间 的 关系 。 本 
套 从 书 正 是 由 此 而 来 ， 并 完美 地 解决 了 这 个 问题 一 一 为 广大 读者 学 习 网 站 开发 技术 提供 一 个 完整 的 学 


习 方案 。 从 书 的 组 织 结构 如 下 : 


网 页 设计 与 制作 指南 ) 


Java 应 用 开发 指南 || ASP.NET 网 络 开发 指南 
Java Web 开 发 指南 || ASP.NET 项 目 开发 指南 


本 书 是 其 中 的 一 本 ， 用 以 帮助 读者 掌握 HIML 和 CSS 的 用 法 。HTML 和 CSS 是 网 络 的 公共 语言 
所 有 的 网 站 都 是 通过 它们 来 与 客户 端 沟 通 的 。 互 联网 从 1969 年 诞生 至 今 ， 已 经 走 过 了 40 个 年 头 。 起 
初 ， 互 联网 只 适合 于 计算 机 专家 、 工 程 师 和 科学 家 使 用 。 到 了 20 世纪 末 ， 互 联网 有 了 较 大 的 发 展 ， 但 
作为 时 黎 一 族 的 新 兴学 科 、 一 个 新 兴 名 词 ， 并 未 被 大 部 分 人 了 解 和 接受 。 进 入 21 世纪 ， 互 联网 的 发 展 
突 飞 儿 进 ， 如 今 已 经 成 为 现代 人 生活 中 的 必需 品 。 

十 多 年 前 , 笔者 第 一 次 使 用 Frontpage 制作 出 了 自己 的 第 一 个 页 面 ， 当 时 现在 看 来 那个 页 面 真 的 很 
糟糕 ， 它 只 是 一 些 颜色 块 、 一 个 标题 和 一 张 飞 入 页 面 的 图 像 ， 但 当时 将 它 展示 给 朋友 时 ， 那 种 通过 自 
己 的 作品 而 带 给 朋友 之 间 的 快乐 至 今 仍然 记忆 犹 新 。 现 在 ， 笔 者 作为 一 个 前 端 页 面 设计 师 ， 享 受 设计 
快乐 的 同时 ， 也 令 这 个 技能 成 为 自己 的 一 份 职业 ， 和 希望 通过 本 书 可 以 将 这 份 对 页 面 制作 的 热爱 和 读者 
一 起 分 享 。 


CSS mgt 
本 书 的 特点 


本 书 深入 浅 出 地 讲解 了 网 页 的 概念 和 制作 网 页 的 方法 ， 以 及 目前 流行 的 各 种 制作 网 页 的 技术 和 常 
用 的 网 页 制作 工具 。 每 章 的 例子 都 是 专门 针对 一 项 技术 而 设计 的 ， 而 且 每 个 例子 中 都 考虑 了 这 项 技术 
的 实用 性 、 趣 味 性 ， 并 将 这 种 特色 融 于 例子 中 。 

笔者 精心 编写 了 这 本 书 ， 其 目的 就 在 于 能 够 系统 、 全 面 地 介绍 制作 前 端 页 面 的 技术 。 简 而 言 之 ， 
本 书 的 宗旨 是 使 读者 可 以 做 出 自己 心目 中 的 网 页 样式 ， 帮 助 读者 迅速 掌握 制作 页 面 的 技巧 ， 由 一 个 初 
级 入 门 者 ， 最 终 成 长 为 一 位 成 熟 、 专 业 的 页 面 设计 人 员 。 


本 书 的 特点 主要 体现 在 以 下 几 个 方面 : 
口 ”本 书 的 编排 采用 循序 渐进 的 方式 ， 适 合 初 、 中 级 读者 逐步 掌握 制作 页 面 的 基本 方法 ， 以 及 设 
计 页 面 和 管理 页 面 的 精髓 。 


口 ”本 书 结合 网 页 制作 技术 十 多 年 的 发 展 过 程 ， 介 绍 了 早期 的 技术 ,重点 介绍 了 目前 流行 的 技术 ， 
同时 也 介绍 了 未 来 技术 的 发 展 趋势 ， 理 解 这 个 发 展 过 程 ， 会 帮助 读者 更 好 地 掌握 制作 页 面 的 
设计 思路 和 精髓 。 

口 ” 本 书 在 介绍 各 种 页 面 制作 技术 时 ， 采 用 了 许多 风趣 易 懂 的 例子 ， 这 些 例子 具备 完整 的 代码 ， 在 介 
绍 理论 知识 的 同时 ， 更 注重 全 书 的 实用 性 。 因 此 ， 读 者 自己 进行 实践 和 演练 时 就 不 会 对 理论 感到 
困惑 。 本 书 的 所 有 例子 、 源 代码 和 各 种 免费 工具 都 附 在 随 书 光盘 中 ， 方 便 读者 使 用 。 

口 ” 本 书 除 介绍 页 面 制作 外 ， 还 补充 了 大 量 相关 的 计算 机 基础 知识 ， 如 图 像 格式 、 颜 色 模式 等 ， 
这 些 都 是 很 重要 的 基础 知识 ， 它 们 不 仅 能 帮助 读者 深入 理解 网 页 制作 ， 对 图 像 制 作 、 动 画 制 
作 等 领域 也 会 起 到 融会 贯通 的 效用 。 

口 本 书 结合 笔者 多 年 的 制作 经 验 ， 在 每 章 结 束 时 都 会 给 出 一 个 综合 实例 ， 以 供 读者 学 习 和 巩 
所 学 知识 。 

口 本 书 附带 一 张 多 媒体 光盘 ， 书 中 所 有 的 实例 及 操作 在 光盘 中 均 有 源 文件 。 

本 书 的 内 容 安 排 

本 书 分 为 4 篇 ， 共 19 章 ， 从 制作 页 面 的 基本 概念 讲 起 ， 再 进一步 介绍 一 个 页 面 的 设计 过 程 所 经 历 
的 各 个 阶段 ， 然 后 结合 目前 成 熟 的 制作 方法 和 理念 ， 讲 解 如 何 进行 页 面 的 设计 制作 ， 最 后 通过 4 个 综 
合 案例 让 读者 加 深 印 象 。 

第 1 篇 (第 1 章 ~ 第 6 章 ) 页 面 制作 入 门 篇 : 讲述 了 页 面 制作 的 基础 知识 ， 包 括 互联 网 的 起 源 
和 发 展 、 页 面 的 基础 概念 、 页 面 的 运行 原理 ， 以 及 制作 页 面 的 基础 知识 。 读 者 通过 这 6 章 的 基础 知识 
来 了 解 什么 是 页 面 ， 如 何在 页 面 中 添加 基本 的 元 素 ， 以 及 重要 的 互联 网 中 的 属性 概念 ， 如 计算 机 中 的 
距离 、 颜 色 、 图 像 等 描述 方式 。 通 过 对 这 部 分 的 学 习 ， 读 者 可 以 制作 简单 的 页 面 。 

第 2 篇 (第 7 章 ~ 第 11 章 ) ”页 面 制作 提高 篇 : 讲述 了 页 面 制作 的 成 熟 技法 和 专业 制作 ， 让 读者 
从 制作 简单 页 面 阶段 进 阶 到 专业 的 制作 页 面 阶段 。 通 过 “CSS+DIV” 的 学 习 ， 让 读者 可 以 了 解 如 何 使 
用 技巧 做 好 页 面 的 布局 设计 ， 如 何 使 用 样式 表 来 让 自己 的 设计 变 得 游 丸 有 余 ， 使 天 马 行 空 的 设计 理念 
成 为 现实 。 

第 3 篇 (第 12 章 ~ 第 15 章 ) 动感 页 面 篇 : 讲述 了 页 面 制 作 的 互动 作用 ， 是 读者 从 普通 页 面 制 
作 人 员 迈 向 高 手 之 路 的 铺垫 。 这 部 分 介绍 了 页 面 和 用 户 互动 的 原理 以 及 如 何 令 页 面 和 用 户 实现 互动 ; 

I. 


下 


介绍 了 什么 是 脚本 语言 ， 通 过 脚本 语言 读者 可 以 制作 基础 的 动态 页 面 。 
第 4 篇 (第 16 章 ~ 第 19 章 ) ”页 面 实 战 篇 : 介绍 了 制作 页 面 的 实用 工具 ， 通 过 4 个 综合 案例 ， 

展现 了 一 个 页 面 如 何 从 一 个 想法 开始 最 后 成 为 一 个 完整 的 页 面 。 

适合 阅读 本 书 的 读者 

希望 进入 网 站 制作 领域 的 新 手 。 

希望 系统 学 习 网 页 制作 的 页 面 制作 人 员 。 

具备 一 定 的 页 面 基础 理论 但 缺乏 实践 操作 的 人 员 。 

对 页 面 设计 有 着 浓厚 兴趣 的 同仁 。 

HTML 语言 爱好 者 。 

网 站 管理 人 员 。 

页 面 样式 设计 人 员 。 


本 书 作者 


本 书 由 赵 辉 组 织 编写 ， 其 他 参与 编写 、 资 料 整理 、 代 码 调试 的 人 员 还 有 陈刚 、 宫 短 、 谷 原野 、 黄 
其 武 、 李 修 花 、 李 延 琨 、 林 家 昌 、 刘 林 建 、 备 富贵 、 彭 自强 、 孙 雪 明 、 王 世 平 、 文 明 、 徐 增 年 、 银 森 
骑 、 张 家 舌 、 张 瑾 瑜 、 周 伟 杰 、 朱 玲 、 陈 杰 、 陈 冠军 、 张 金霞 、 张 昆 和 尹 继 平 ， 在 此 一 并 表示 感谢 。 
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1.1.1 网 页 的 概述 2 2.3.5 页 面 的 身体 一 一 体 标签 <body>.. 
2.3.6 美化 HTML 文档 
1.1.2 静态 网 页 .… Ne 
1.1.3 动态 网 页 网 2.4 案例 : 我 们 的 第 一 个 页 面 .. 
1.1.4 开发 动态 页 面 和 静态 页 面 的 联系 .…… 6 2.5 小 结 
开发 网 页 的 工具 第 3 章 动手 在 网 页 中 写 些 什 么 …..…..……… 30 
1.2.1 HTML 页 面 的 开发 工具 … wn 3.1 新 旧 方 法 对 比 .… 
1.2.2 动态 页 面 的 开发 工具 .…… a 3.2 文本 的 排版 格式 
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1.4.3 可 扩展 超 文本 标识 语言 XHTML .…… 13 
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二 14 
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初 识 HTML. 
2.2.1 HTML 语法 …. 
2.2.2 HTML 文档 的 结构 .… loneiioilk 

HIML 文档 基本 结构 标签 的 作用 i 20 
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标签 <html>.… WR | 
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第 1 章 了解 网 页 


15 年 前 ，“ 网 上 冲浪 ”还 是 一 个 很 时 尚 的 名 词 ， 但 随 着 互联 网 的 飞速 发 展 ， 时 至 今日 ， 使 用 网 络 
已 经 成 为 人 们 生活 中 的 一 部 分 。Web 1.0 时 代 ， 人 们 只 是 在 网 页 上 浏览 信息 ， 而 在 现在 所 处 的 Web 2.0 
时 代 里 ， 人 们 可 以 在 网 页 上 和 朋友 讨论 话题 、 听 音乐 、 看 电影 、 进 行 电子 商务 的 操作 。《 纽 约 时报 》 
专栏 作家 托马斯 。 弗 里 曼 在 他 的 《世界 是 平 的 》 一 书 中 说 到 : “2000 年 世界 进入 了 一 个 新 纪元 : 全 球 
化 3.0。 世 界 从 小 缩 成 微小 ， 竞 赛场 地 铲 平 了 。” 

本 章 将 介绍 一 些 与 互联 网 相关 的 常用 技术 解释 ， 以 及 制作 网 页 时 通常 需要 涉及 的 领域 和 考虑 的 问 
题 等 。 本 章 的 知识 点 很 多 但 并 不 难 理解 ， 读 者 千 万 不 要 被 那些 可 怕 的 名 词 或 代码 给 吓 住 。 虽 然 HTML 
(Hypertext Marked Language， 超 文本 标记 语言 ) 标签 很 多 ， 但 是 在 找到 规律 后 也 就 千篇一律 了 。 好 比 
去 大 卖场 买 菜 ， 第 一 次 进去 真 的 很 无 奈 ， 因 为 根本 分 不 清 蔬 菜 的 种 类 ， 至 少 在 笔者 眼 里 ， 感 觉 都 是 绿 
色 的 “ 草 ”。 但 是 多 去 儿 次 后 就 可 以 很 轻松 地 做 这 件 事 了 。 事 实 上 ， 学 习 HTML 不 会 比 买 菜 难 。 本 章 
的 知识 点 如 下 。 
网 页 的 概念 和 分 类 : 了 解 网 页 的 概念 ， 区 别 静 态 网 页 和 动态 网 页 的 不 同 。 
设计 网 页 的 原则 和 工具 : 了 解 开 发 网 页 的 常用 工具 。 
网 页 浏览 器 的 工作 原理 : 知道 网 页 浏览 器 的 工作 原理 ， 并 了 解 3 种 常用 的 浏览 器 。 
HTML、XML (The Extensible Markup Language, 可 扩展 标识 语言 ) 和 XHTML (The Extensible 
Hypertext Markup Language， 可 扩展 超 文本 标识 语言 ) 的 概念 ， 区 别 这 3 个 概念 的 异同 点 。 
HTML 应 用 : 通过 本 章 最 后 的 实例 ， 演 示 一 个 简单 的 HTML 页 面 的 开发 步骤 。 
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1.1 什么 是 网 页 


21 世纪 是 信息 化 的 时 代 ， 互 联网 使 用 者 可 以 在 Internet 上 通过 网 页 浏览 信息 ， 如 新 闻 、 图 片 等 ; 
也 可 以 通过 互联 网 发 布 信息 ， 如 招聘 信息 、 各 种 广告 ;或 者 是 追赶 潮流 ， 加 入 现今 十 分 流行 的 博客 一 
族 。 然 而 这 些 都 离 不 开 互联 网 的 这 扇 窗户 一 一 网 页 。 本 节 将 介绍 网 页 的 相关 知识 。 


1.1.1 网 页 的 概述 


网 页 其 实 是 在 这 个 世界 的 某 一 个 地 方 某 一 台 计算 机 上 的 一 个 文件 ， 通 过 互联 网 ， 也 就 是 Internet 
将 两 个 不 同 的 地 址 相连 ， 把 人 们 的 信息 传达 到 网 络 世界 的 各 个 角落 。 人 们 通过 互联 网 ， 可 以 在 世界 的 
任何 一 个 地 方 互相 交流 沟通 。 

什么 是 互联 网 ? 互联 网 是 一 种 概念 ， 一 个 虚拟 的 东西 。 人 们 可 以 通过 浏览 器 浏览 新 浪 、 百 度 等 页 
面 ， 但 不 会 有 人 说 “浏览 互联 网 ”。 互 联网 指 的 正 是 把 所 有 网 页 链接 在 一 起 的 巨大 信息 交流 形式 ， 它 
基于 很 多 的 协议 来 体现 出 它 的 表现 形式 。1989 年 欧洲 粒子 物理 实验 室 的 科学 家 们 提出 了 一 个 分 类 互联 
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网 信息 的 协议 。 这 个 协议 极 大 地 推动 了 互联 网 的 发 展 和 普及 ， 后 来 它 有 了 一 个 十 分 响亮 的 名 字 WWW 
(World Wide Web) ， 中 文 又 称 万 维 网 (Wan Wei Wang) 。 可 以 认为 ， 从 20 世纪 90 年 代 开 始 ， 互 联 
网 进入 了 Web 1.0 的 时 代 。 

早期 的 Web 1.0 时 代 ， 大 部 分 网 页 只 有 文字 、 图 像 信 息 可 以 浏览 ， 这 个 时 候 最 典型 的 互联 网 标志 
就 是 门户 网 站 ， pc 搜狐 。 从 2001 年 开始 ， 人 们 认为 互联 网 开始 进入 Web 2.0 时 代 ， 这 时 的 网 页 
可 以 包含 动画 、 音 频 、 视 频 ， 也 可 以 在 网 页 中 进行 交流 、 上 传 文件 ， 使 用 完全 交互 式 的 程序 。 互 联网 
小 作 的 问 二 限 和 任何 使 用 网 络 的 人 ， 都 可 以 参与 到 网 页 的 制作 中 。 

笼统 地 说 ， 网 页 主要 由 结构 、 表 现 和 行为 3 部 分 组 成 。 对 应 的 标准 也 分 为 3 类 ， 其 中 大 部 分 都 是 
由 W3C (World Wide Web 协会 ) 所 制定 ， 这 其 中 就 包括 HTML 和 CSS (Cascading Style Sheets， 即 层 
登 样 式 表 ) 。 对 于 初学 者 来 说 ， 了 解 网 页 的 制作 ， 一 定 要 分 清楚 HTML 和 CSS 的 不 同 作 用 。 


说 明 : HTML 标准 基于 语义 学 , 通过 标签 来 应 用 语义 的 过 程 ， 使 用 起 来 好 像 是 打手 语 ,做 一 


个 3， 去 告诉 对 方 代表 了 什么 意思 。 不 同 的 是 ， 这 里 的 手势 换 成 了 标签 。 


例如 ， 使 用 <table>， 这 是 一 个 表格 标签 ， 意思 是 “将 在 这 里 放 入 一 个 表格 ”。 那 么 这 个 表格 该 如 
何 表 现在 浏览 者 的 面前 呢 ? 如 它 的 颜色 、 边 框 粗细 等 。 而 CSS 的 出 现 为 设计 者 解决 了 这 些 问 题 ， 如 
图 1.1 和 图 1.2 所 示 为 不 同样 式 的 表格 。 


mW 。 
文件 全 后 (E) 查看 以 历史 书签 B) 了 放生 E) 坦 看 (历史 G) 书生 @) 


E3 更 
图 1.1 粗 边 框 的 表格 1.2” 细 边框 的 表格 


图 1.1 和 图 1.2 都 是 有 着 一 个 3X3 表格 的 页 面 。 这 样 的 描述 ， 如 同 HTML 语言 所 表达 的 含义 ， 体 
现 出 页 面 上 的 内 容 , 而 在 浏览 器 中 最 后 的 显示 效果 是 完全 不 同 外 表 的 两 个 表格 .图 1.1 表格 的 边框 较 粗 ， 
黑色 ; 图 1.2 表格 边框 较 细 ， 红 色 。 这 是 因为 它们 使 用 了 不 同 的 CSS 样式 表 。 

所 以 通俗 地 说 ，HIML 表现 了 页 面 的 结构 ， 而 CSS 修饰 了 页 面 中 的 这 些 内 容 。 如 果 把 制作 网 页 比 作 
一 个 人 在 设计 一 间 屋 子 ， 那 么 HTML 语言 的 作用 是 用 来 明确 这 个 屋子 内 要 放 入 哪些 家 具 ， 或 者 是 床 、 书 
柜 、 椅 子 等 。 而 CSS 的 作用 就 是 改变 这 些 家 具 的 样式 ， 对 应 的 如 床 的 样式 、 书 柜 的 样式 、 椅子 的 样式 等 。 


1.1.2 静态 网 页 


在 网 站 设计 中 ， 纯 粹 的 HTML 格式 网 页 通常 被 称 为 “静态 网 页 ”， 早 期 的 网 站 一 般 都 是 由 静态 网 
页 组 成 的 。 静 态 网 页 的 特点 是 这 个 网 页 不 论 何 时 何 地 浏览 ， 都 将 显示 相同 的 形式 和 内 容 ， 且 仅 能 供 浏 
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览 ， 无 法 与 网 站 进行 互动 。 也 就 是 说 ， 无 法 提供 信息 给 网 站 ， 让 网 站 响应 使 用 者 的 需求 。 
【本 节 示 例 参考 : 资料 光盘 \ 第 1 章 \1-1 静态 页 面 .html】 
【实例 1-1】 一 个 静态 页 面 的 代码 展示 如 下 : 


程序 1.1 静态 页 面 .html 


01 <html> 

02 <head> 

03 <title> 静 态 页 面 </title> 

04 </head> 

05 <body> 

06 <h1> 这 是 一 个 静态 页 面 </h1> 

07 <h3> 您 只 能 浏览 ， 不 能 进行 交互 。</h3> 


08 </body> 
09 </html> 
【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 1.3 所 示 ， 它 只 能 浏览 而 不 能 被 交互 。 
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这 是 一 个 静态 页 面 
您 只 能 浏览 ， 不 能 进行 交互 。 


图 1.3 静态 页 面 示例 


【深入 学 习 】 静 态 页 面 使 用 HTML 编写， 通常 扩展 名 为 .htm、.html、.shtml、.xml 等 。 静 态 网 页 只 
能 单纯 地 在 网 页 中 展示 文字 与 图 片 ， 听 起 来 似乎 功能 简单 ， 但 它 是 所 有 网 页 的 基础 要 素 ， 其 重要 性 不 
言 而 喻 。 

在 静态 网 页 中 , 整个 网 页 的 主要 结构 与 网 页 的 显示 控制 都 必须 利用 HTML 实现 。 在 HTML 格式 的 
网 页 上 ， 可 以 出 现 各 种 动态 的 效果 ， 如 .GIF 格式 的 动画 、Flash、 滚 动 字幕 等 。 这 些 “ 动 态 效 果 ” 只 是 
视觉 上 的 ， 而 动态 网 页 是 不 同 的 概念 。 


注意 : 本 书 中 大 部 分 的 实例 都 是 静态 页 面 。 


1.1.3 ”动态 网 页 


动态 网 页 是 与 静态 网 页 相对 应 的 ， 指 网 页 的 内 容 可 以 根据 某 种 条 件 的 改变 而 自动 改变 。 如 腾讯 公 
司 的 Qzone 空间 里 ， 常 常会 有 一 些 使 用 者 嵌入 一 个 小 小 的 计数 器 功能 ， 当 有 人 单 击 设计 者 的 网 页 时 ， 
计数 器 的 值 会 自动 增加 。 这 个 计数 器 就 是 动态 的 。 再 比如 ， 目 前 网 络 流行 的 论坛 、 社 区 网 ， 其 中 用 户 
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的 注册 页 面 ， 当 用 户 输 入 正确 的 用 户 名 和 密码 后 会 成 功 登录 ， 如 果 输 入 的 用 户 名 或 密码 错误 ， 页 面 会 
提示 用 户 错误 信息 。 这 也 是 典型 的 动态 页 面 。 

同时 ， 与 静态 网 页 的 后 级 不 同 ， 动 态 网 页 是 以 .asp、jsp、.php、.perl、.cgi 等 形式 为 后 级 ， 并 且 在 
动态 网 页 网 址 中 有 一 个 标志 性 的 符号 “?”。 一 个 典型 的 动态 网 页 的 URL (Uniform Resource Locator， 
即 统一 资源 定位 器 ) 形式 为 : http://www.sina.cn/ip/index.asp?id=1。 那 么 ， 动 态 网 页 与 网 页 上 的 各 种 动 
画 、 滚 动 字幕 等 视觉 上 的 动态 效果 为 什么 不 是 一 个 概念 呢 ? 

动态 网 页 可 以 是 纯 文字 内 容 的 ， 也 可 以 是 包含 各 种 动画 的 内 容 。 这 些 只 是 网 页 具体 内 容 的 表现 形 
式 ， 并 不 是 动态 技术 生成 的 页 面 ， 它 不 能 根据 用 户 的 要 求 来 更 新 页 面 。 而 一 个 网 页 ， 无 论 是 否 具有 动 
态 效果 ， 除 非 是 采用 动态 网 站 技术 生成 的 网 页 ， 才 可 以 称 为 动态 网 页 。 


注意 : 分 清静 态 页 面 和 动态 页 面 的 区 别 很 重要 ， 概 念 清晰 才能 进一步 理解 哪些 是 HTML 语 
言 可 以 做 到 的 ， 哪 些 是 不 允许 的 ， 避 免 在 学 习 的 过 程 中 钻 牛角 尖 。 


在 了 解 了 动态 网 页 的 概念 之 后 ， 下 面 通过 一 个 动态 网 页 的 例子 来 说 明 动 态 页 面 是 如 何 和 用 户 互动 
的 。 如 图 1.4 所 示 是 一 个 动态 页 面 的 第 一 个 页 面 。 当 填 入 一 个 已 注册 用 户 ， 如 用 户 名 为 appleing， 密 码 
为 1234567 时 , 系统 检查 到 用 户 名 和 密码 是 正确 的 , 即 跳 转 到 用 户 页 面 , 如 图 1.5 所 示 为 一 个 用 户 页 面 。 
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1.4 userLoginjsp 页 面 1.5 用 户 页 面 


图 1.5 所 示 的 页 面 可 以 显示 该 用 户 使 用 的 功能 , 包括 用 户 邮件 服务 和 用 户 短 消息 服务 。 这 种 针对 使 
用 者 的 设计 是 动态 页 面 典型 的 功能 标志 。 而 如 果 用 户 输入 错误 的 用 户 名 和 密码 ， 如 用 户 名 为 bupt， 密 
码 为 bupt， 则 系统 会 检查 到 用 户 名 和 密码 是 错误 的 ， 会 跳出 错误 信息 ， 显 示 登 录 失 败 。 如 图 1.6 所 示 
为 登录 失败 的 页 面 。 
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图 1.6 登录 报错 页 面 
以 上 是 一 个 典型 的 动态 页 面 的 例子 ， 用 户 输入 不 同 的 信息 ， 则 页 面 显示 不 同 的 结果 。 动 态 页 面 比 
静态 页 面 显得 更 智能 、 更 人 性 化 ， 自 然 也 是 互联 网 发 展 的 趋势 。 而 理解 HTML 页 面 是 学 习 动 态 页 面 的 
必 备 基础 知识 。 


1.1.4 开发 动态 页 面 和 静态 页 面 的 联系 


早期 的 动态 网 页 主要 采用 CGI (Common Gateway Interface) 技术 ， 是 HTTP 服务 器 与 用 户 或 其 他 
机 器 上 的 程序 进行 “交谈 ”的 一 种 工具 ， 其 程序 须 运行 在 网 络 服务 器 上 ， 可 以 使 用 多 种 不 同 的 程序 语 
言 (如 Visual Basic、Delphi 或 C/C++ 等 ) 编写 适合 的 CGI 程序 。 

当 用 户 在 页 面 上 留言 ， 输 入 一 段 信息 ， 接 着 单 击 “ 确 定 ” 按 钮 时 ， 都 是 工作 在 客户 端 。 而 接 下 来 
浏览 器 会 将 用 户 的 信息 传递 到 CGI 程序 ， 于 是 CGI 程序 在 服务 器 上 按照 预定 的 方法 进行 处 理 。 虽 然 
CGI 技术 已 经 应 用 很 长 时 间 ， 而 且 功能 比较 强大 ， 但 由 于 其 有 编程 困难 、 效 率 低 下 、 修 改 复 杂 等 缺点 
而 逐渐 被 新 技术 取代 。 目 前 常用 的 新 技术 有 3 种 ,这 3 种 技术 在 制作 网 页 上 各 有 特色 ， 但 都 在 发 展 中 。 
在 互联 网 领域 中 ， 这 3 种 技术 的 格局 像 三 国 分 立 的 局 面 一 样 ， 都 占有 市 场 的 一 席 之 地 ， 它 们 就 是 PHP 
脚本 语言 、ASP 脚本 语言 和 JSP 脚本 语言 。 

1. PHP 脚本 语言 

PHP 即 Hypertext Preprocessor ( 超 文本 预 处 理 器 ) ， 是 目前 在 Internet 上 应 用 较为 广泛 的 脚本 语言 ， 
其 语法 借鉴 了 C、Java、Perl 等 语言 。PHP 对 编程 能 力 的 要 求 不 高 ， 只 需 少 量 的 编程 知识 就 可 以 使 用 
PHP 建立 一 个 交互 的 Web 站 点 。 

PHP 与 HTML 语 言 具 有 非常 好 的 兼容 性 , 因此 它 与 HTML 可 以 结合 使 用 从 而 更 好 地 实现 页 面 控制 ， 
即 直接 在 脚本 代码 中 加 入 HTML 标签 , 或 者 在 HTML 标签 中 加 入 脚本 代码 。 PHP 提供 了 标准 的 数据 库 
接口 使 得 连接 数据 库 比 较 方 便 ， 另 外 还 具有 扩展 性 强 、 可 以 进行 面向 对 象 编程 等 特点 。 

2. ASP 脚本 语言 

ASP 即 Active Server Pages， 是 微软 开发 的 一 种 语言 ， 它 本 身 没 有 专门 的 编程 语言 ， 而 是 允许 用 户 
使 用 许多 已 有 的 脚本 语言 编写 ASP 的 应 用 程序 。ASP 的 工作 方式 是 在 Web 服务 器 端 运行 ， 运 行 后 再 
将 运行 结果 以 HTML 格式 传送 至 客户 端的 浏览 器 。 正 因为 如 此 ，ASP 要 比 一 般 的 脚本 语言 安全 得 多 。 

ASP 可 以 包含 HTML 标签 ， 也 可 以 直接 存 取 数 据 库 及 使 用 可 扩充 的 ActiveX 控件 , 因此 ASP 的 程 
序 编写 比 HTML 更 方便 且 更 有 灵活 性 . 但 ASP 技术 基本 上 是 局 限于 微软 的 操作 系统 平台 之 上 , 主要 工 
作 环 境 是 微软 的 IS 应 用 程序 结构 ， 而 且 ActiveX 对 象 具 有 平台 特性 ， 所 以 ASP 技术 跨 平台 性 不 是 很 
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好 ， 即 实现 在 跨 平 台 Web 服务 器 上 工作 不 是 很 容易 。 

3. JSP 脚本 语言 

JSP 即 Java Server Pages， 它 是 由 Sun Microsystem 推出 的 ， 是 以 Java Servlet 和 整个 Java 体系 的 
Web 开发 技术 为 基础 .JSP 和 ASP 在 技术 方面 有 许多 相似 之 处 , 不 过 ASP 一 般 只 应 用 于 微软 的 平台 上 ， 
而 JSP 则 可 以 在 大 多 数 的 服务 器 上 运行 ， 而 且 采 用 JSP 技术 开发 的 应 用 程序 比 采用 ASP 开发 的 应 用 程 
序 更 具有 可 维护 性 和 可 管理 性 ， 所 以 ，JSP 被 业界 认为 是 未 来 最 有 发 展 前 途 的 动态 网 站 技术 。 

这 3 种 技术 目前 是 制作 动态 页 面 的 主流 ， 而 且 在 未 来 一 段 时 间 内 ，PHP、ASP、JSP 也 会 在 竞争 中 
共存 。 对 微软 服务 器 较 熟 悉 的 程序 员 采 用 ASP 技术 更 容易 得 心 应 手 。 对 于 Linux 的 爱好 者 来 说 ， 采 用 
PHP 技术 是 比较 合适 的 选择 。 对 可 维护 性 和 可 管理 性 要 求 较 高 的 设计 者 ， 适 合 使 用 JSP 技术 ， 尤 其 是 
在 构建 大 型 网 站 的 应 用 中 。 


注意 : 动态 页 面 的 制作 相对 HTML 页 面 复杂 很 多 ， 了 解 动态 页 面 的 制作 方式 和 HTML 页 面 


的 关联 ， 能 够 帮助 初学 者 学 习 理解 静态 页 面 。 


事实 上 , 动态 页 面 的 设计 是 离 不 开 HTML 的 , 每 一 个 动态 网 页 开发 者 都 必须 掌握 HTML 语言 。 在 
实际 应 用 的 网 页 中 ,动态 网 站 中 包含 大 量 的 HTML 代码 ， 合 理 结合 静态 页 面 和 动态 页 面 可 以 使 网 页 设 
计 更 加 灵活 。 

此 外 ， 设 计 者 应 明白 ,动态 网 站 不 一 定 比 静态 网 页 更 好 ， 动 态 网 站 的 交互 性 可 能 带 来 安全 隐患 ， 
而 且 动 态 网 站 的 信息 均 是 从 数据 库 中 读 取 ， 当 负荷 过 大 时 可 能 造成 网 站 衣 泪 。 或 者 动态 网 站 对 于 搜索 
引擎 不 是 很 友好 ， 在 一 些 搜索 页 面 中 不 容易 被 查找 ， 这 样 会 影响 网 站 的 推广 。 

因此 ， 无 论 是 从 HTML 在 网 页 设计 中 的 基础 地 位 还 是 其 优点 来 说 ， 熟 练 掌握 HTML 对 于 网 页 设计 
是 很 重要 的 基础 。 在 这 个 基础 上 再 向 动态 页 面 设计 的 道路 前 进 时 ， 会 更 容易 掌握 动态 页 面 的 使 用 技术 。 


1.2 开发 网 页 的 工具 


如 果 说 制作 网 页 的 设计 者 是 一 个 画家 ， 那 么 开发 程序 的 工具 就 相当 于 画家 手中 的 画笔 和 颜料 。 这 
些 工具 能 为 设计 者 编写 、 调 试 、 运 行 代码 时 提供 一 个 方便 的 环境 。 在 开发 网 页 时 也 有 属于 它 的 开发 工 
具 和 为 这 种 语言 量 身 定做 的 开发 工具 , 如 记事 本 、Dreamweaver 等 工具 可 以 用 来 开发 PHP、ASP 和 JSP 
中 的 任何 一 种 程序 。 
1.2.1 HTML 页 面 的 开发 工具 


HTML 语言 作为 一 种 语义 派生 出 来 的 语言 ,最 常见 的 有 3 种 开发 工具 ,分 别 是 记事 本 、Dreamweaver 
和 Frontpage。 


1. 记事 本 
记事 本 是 Windows 系统 自 带 的 简单 的 文本 编辑 软件 ， 但 由 于 大 部 分 代码 都 是 纯 文本 的 ， 所 以 记事 
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本 可 以 编写 任何 网 页 。 不 过 对 于 稍 大 型 的 网 页 需要 编辑 大 量 代码 时 ， 记 事 本 就 显得 不 那么 适合 了 ， 但 
对 于 初学 者 来 说 ， 记 事 本 是 较 好 的 练习 工具 。 

2. Dreamweaver 开发 工具 

Dreamweaver 是 MACROMEDIA 公司 开发 的 集 网 页 制作 和 管理 网 站 于 一 身 的 网 页 编辑 器 ， 它 是 一 
款 专业 网 页 设计 师 的 视觉 化 网 页 开发 工具 ， 利 用 它 可 以 制作 出 跨越 平台 限制 和 跨越 浏览 器 限制 的 充满 
动感 的 网 页 。 

Dreamweaver 最 大 的 特点 是 所 见 即 所 得 。 可 以 使 用 它 的 网 站 地 图 快速 制作 网 站 雏形 ， 设 计 、 更 新 
和 重组 网 页 。 此 外 ，Dreamweaver 可 以 自动 生成 源 代码 ， 大 大 提高 了 网 页 开发 人 员 的 工作 效率 。 但 是 
Dreamweaver 也 有 其 自身 的 缺点 ， 在 一 些 复杂 的 网 页 中 ， 难 以 精确 达到 与 浏览 器 完全 一 致 的 显示 效果 。 
同时 其 产生 的 代码 效率 比较 低 。 

Dreamweaver 是 一 款 可 视 化 编辑 工具 ， 如 图 1.7 所 示 为 Dreamweaver 工作 状态 的 操作 界面 。 
Dreamweaver 不 仅 支持 静态 页 面 的 编写 ， 而 且 还 支持 PHP、ASP、JSP 等 动态 网 页 的 编写 与 调试 。 对 于 
网 页 设计 初学 者 来 说 ，Dreamweaver 是 一 款 比 较 好 的 入 门 软件 ， 即 使 对 HTML 不 太 熟 悉 ， 也 能 做 出 漂 
亮 的 网 页 。 

Dreamweaver 的 工作 界面 是 分 割 成 一 块 块 的 窗口 ， 这 些 工具 窗口 可 以 按照 用 户 自 定义 的 样式 自由 
设 定 。 从 图 1.7 中 可 以 看 到 ， 最 引信 注意 的 两 个 工作 区 域 分 别 是 代码 区 和 预览 区 。 


说 明 : 关于 Dreamweaver 的 进一步 介绍 可 以 参考 第 15 章 。 


3. Frontpage 开发 工具 

Frontpage 是 微软 公司 发 布 的 一 款 入 门 级 网 页 制作 工具 ， 是 微软 Office 组 件 的 一 部 分 。 相 比 于 
Dreamweaver, Dreamweaver 的 直观 性 和 高 效 性 是 Frontpage 无 法 比拟 的 ,而 且 在 功能 拓展 方面 Frontpage 
也 少 于 Dreamweaver。 因 此 ，2006 年 Frontpage 停止 了 发 售 ， 但 并 不 能 因此 否认 这 是 一 款 失败 的 制作 软 
件 ， 因 为 它 依然 受到 众多 用 户 的 欢迎 。 如 图 1.8 所 示 为 Frontpage 的 操作 界面 。 

由 于 Dreamweaver 的 适用 性 目前 已 经 超过 了 Frontpage， 因 此 在 大 多 数 情况 下 ， 设 计 人 员 的 第 一 选 
择 已 经 是 Dreamweaver。 
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1.7 Dreamweaver 的 操作 界面 1.8 ”Frontpage 的 操作 界面 


第 1 章 “了解 网 页 


1.2.2 ”动态 页 面 的 开发 工具 


动态 页 面 的 开发 工具 根据 开发 语言 的 不 同 而 不 同 。 本 节 主 要 介绍 常见 的 3 种 开发 语言 : PHP、ASP、 
JSP 的 开发 工具 。 

1. PHP 开发 工具 

PHP 作为 一 种 开放 型 的 语言 ， 其 开发 工具 并 没有 标准 的 规定 ， 可 以 用 很 多 工具 进行 开发 (包括 记 
事 本 ) ， 也 可 以 用 ZDE 等 工具 进行 开发 ， 只 要 语法 正确 即 可 。 比 较 好 的 是 ZDE 和 PHPED 开发 工具 。 

ZDE (Zend Development Environment) 是 ZEND 公司 推出 的 一 款 集成 开发 平台 。ZDE 是 用 Java 
语言 编写 的 ， 其 同样 具有 多 平台 性 。 

PHPED 是 由 NUSPHERE 公司 推出 的 ， 它 提供 的 功能 最 全 ， 同 样 具有 语法 加 亮 、 函 数 补 全 和 工程 
管理 等 功能 。 除 此 之 外 ， 还 有 自动 代码 补 全 、 可 视 化 的 数据 库 管 理 、 常 见 HTML 标签 集 、 支 持 插件 等 
功能 。 同 时 它 还 内 置 DAV、CVS、FTP、WEBSERVER、DEBUGGER、JS 代码 列表 。 


说 明 : 对 于 HTML 页 面 的 开发 者 来 说 ， 可 以 不 需要 了 解 这 两 种 开发 软件 ， 它 们 主要 针对 开 


发 PHP 页 面 。 


2. ASP 开发 工具 

Visual InterDev 是 Microsoft 公司 所 开发 的 ASP 开发 工具 ， 是 一 款 可 视 化 工具 ， 可 以 对 ASP 代码 
进行 颜色 识别 、 自 动 代码 提示 。Visual InterDev 是 为 程序 员 设 计 的 网 页 开发 工具 , 而 Microsoft Frontpage 
是 针对 非 程序 员 的 编辑 工具 。Microsoft Frontpage 是 Microsoft Office 中 的 一 部 分 ，Visual InterDev 则 是 
Microsoft Visual Tools 中 的 一 部 分 ， 其 外 观 和 工作 模式 均 与 其 他 Microsoft 可 视 开 发 工具 类 似 ， 如 
Microsoft Visual C++。 

3. JSP 开发 工具 

MyEclipse+Struts 是 比较 流行 的 JSP 开发 工具 。Struts 最 早 是 作为 Apache Jakarta 项 目的 组 成 部 分 ， 
项 目的 创立 者 希望 通过 对 该 项 目的 研究 ， 改 进 和 提高 Java Server Pages、Servlet、 标 签 库 以 及 面向 对 象 
的 技术 水 准 。Struts 这 个 名 字 来 源 于 在 建筑 和 旧式 飞机 中 使 用 的 支持 金属 架 ， 这 个 框架 之 所 以 称 为 
Struts， 是 为 了 提醒 人 们 记 住 那些 支撑 房屋 、 建 筑 、 桥 梁 ， 甚 至 在 踩 高 跷 时 的 基础 支撑 。 

这 也 是 一 个 解释 Struts 在 开发 Web 应 用 程序 中 所 扮演 角色 的 精彩 描述 。 当 建立 一 个 物理 建筑 时 ， 
建筑 工程 师 使 用 支柱 为 建筑 的 每 一 层 提供 支持 。 使 用 JSP 开发 工具 开发 简单 、 维 护 方便 ， 而 且 便 于 安 
装 插件 ， 可 以 与 Spring、Hibernate 等 结合 使 用 ， 满 足 开发 者 的 需要 。 


说 明 : 这 些 都 是 动态 页 面 的 开发 环境 ， 并 不 是 静态 页 面 的 范畴 ， 故 这 里 只 做 一 个 简要 的 介绍 。 


网 页 设计 指南 


1.3 使 用 网 页 浏览 器 


网 页 浏览 器 是 显示 网 页 服务 器 或 档案 系统 内 的 文件 ， 并 让 用 户 与 这 些 文件 互动 的 一 种 软件 。 它 用 
来 显示 在 万 维 网 或 局 部 局 域 网 络 等 内 的 文字 、 影 像 及 其 他 资讯 。 浏 览 器 就 是 设计 者 的 画廊 ， 设 计 者 把 
网 页 放 在 这 里 展示 给 用 户 。 


1.3.1 网 页 浏览 器 的 工作 原理 


Windows 系统 中 自 带 了 下 浏览 器 , 普通 用 户 在 使 用 它 浏览 网 页 时 , 很 多 时 候 都 忽视 了 自己 在 使 用 浏 
览 器 。 对 于 一 个 页 面 设计 者 来 说 ， 了 解 浏览 器 的 原理 可 以 令 设计 者 找到 适合 的 途径 把 网 页 展示 给 用 户 。 
那么 用 户 是 如 何 使 用 浏览 器 浏览 网 页 的 呢 ? WWW 是 一 种 采用 B/S〈Browser/Server) 的 结构 ， 即 
浏览 器 和 服务 器 结构 。 它 是 随 着 Internet 技术 的 兴起 ， 对 C/S 结构 的 一 种 变化 或 改进 的 结构 。 在 这 种 结 
构 下 ， 用 户 工作 界面 是 通过 WWW 浏览 器 来 实现 的 ， 主 要 事务 逻辑 在 服务 器 端 (Server) 实现 ， 很 少 
部 分 事务 逻辑 在 前 端 (Browser) 实现 。 这 样 的 好 处 是 大 大 简化 了 客户 端的 计算 机 载荷 ， 减 轻 了 系统 维 
护 与 升级 的 成 本 和 工作 量 ， 降 低 了 用 户 的 总 体 成 本 。 因 此 ， 用 户 只 需要 安装 浏览 器 即 可 浏览 页 面 ， 不 
需要 知道 服务 器 端 使 用 什么 操作 系统 或 服务 器 端 怎么 处 理 浏览 器 发 出 的 请 求 ， 可 以 方便 查看 自己 想 看 
到 的 内 容 。 
浏览 器 的 工作 原理 可 以 分 以 下 几 步 来 理解 
(1) 浏览 器 通过 HTML 表单 或 超 链接 请 求 指向 一 个 应 用 程序 的 URL。 
(2) 服务 器 收发 到 用 户 的 请 求 。 
(3) 服务 器 执行 已 接受 创建 的 指定 应 用 程序 。 
(4) 应 用 程序 通常 是 基于 用 户 输入 的 内 容 ， 执 行 所 需要 的 操作 。 
(5) 应 用 程序 把 结果 格式 化 为 网 络 服务 器 和 浏览 器 能 够 理解 的 文档 , 即 我 们 所 说 的 HTML 网 页 。 
(6) 网 络 服务 器 最 后 将 结果 返回 到 浏览 器 中 。 
如 图 1.9 所 示 为 浏览 器 的 工作 原理 流程 图 。 


测 瞧 总 通过 去 单 或 直人 村 请 URL 格 用 户 请 未 发 送 到 服务 器 
ot ss 


浏览 器 服务 器 


应 用 程序 把 结果 格式 化 为 网 
绝 服 务 问 和 浏览 路 能 理解 的 
文档 ， 把 结果 返回 且 济 览 舌 


应 用 程序 执行 | 


所 天 要 的 织 作 | 有 sss 汶 gi 者 创 寻 的 第 定 应 用 程序 


图 1.9 浏览 器 的 工作 原理 流程 图 
图 1.9 是 一 个 从 用 户 在 浏览 器 输入 网 址 到 浏览 器 显示 页 面 的 工作 过 程 。WWW 的 基础 是 HTTP 协 
议 ，Web 浏览 器 就 是 用 于 通过 URL 来 获取 并 显示 Web 网 页 的 一 种 软件 工具 。URL 用 于 指定 要 取得 的 
Internet 上 资源 的 位 置 与 方式 。 
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因此 ， 并 不 是 所 有 浏览 器 都 支持 HTML 语言 标签 。 在 这 种 情况 下 ， 需 要 在 HTML 中 添 入 声明 作用 
的 代码 ， 相 关 的 知识 点 在 本 书后 面 的 章节 中 将 会 详细 介绍 。 


1.3.2 ”常用 的 两 种 浏览 


目前 互联 网 上 最 常用 的 有 两 种 浏览 器 ， 分 别 是 Internet Explorer 和 Mozilla Firefox， 它 们 基于 不 同 
的 内 核 ， 各 有 特色 ， 难 分 伯仲 。 

Internet Explorer 简称 下 或 MSIE， 是 微软 公司 推出 的 一 款 网 页 浏览 器 。 自 从 2004 年 上 市 以 来 ,， 虽 
然 目 前 丢失 了 一 部 分 市 场 占有 率 , 但 正 浏览 器 依然 是 目前 使 用 最 广泛 的 网 页 浏览 器 。 它 被 捆绑 作为 所 
有 新 版 本 的 Windows 操作 系统 中 的 默认 浏览 器 ， 如 图 1.10 所 示 。 

Mozilla Firefox 是 由 Mozilla 公司 开发 的 一 个 自由 的 、 开 放 源 码 的 浏览 器 , 是 一 款 可 以 与 下 系列 浏览 
器 一 争 高 低 的 浏览 器 。 这 款 浏览 器 有 效 地 支持 W3C 各 项 国际 标准 ， 有 Windows、Linux 等 多 个 平台 的 版 
本 ， 其 特点 是 轻便 、 安 全 、 分 栏 浏览 ， 第 三 方 扩展 非常 多 ， 可 以 极 大 地 提高 浏览 的 乐趣 。 

除 此 之 外 ， 由 于 是 开源 组 织 维护 Firefox， 所 以 它 对 错误 的 修正 是 极为 迅速 的 ， 新 功能 的 实现 也 都 
是 基于 用 户 的 要 求 。 由 于 Firefox 本 身 的 优秀 特效 , 吸引 了 许多 人 义务 为 它 宣传 , 不 断 扩 大 它 的 影响 力 ， 
现在 它 的 市 场 占有 率 正 不 断 提高 ， 开 始 撼动 IE 的 垄断 地 位 。 如 图 1.11 所 示 为 Firefox 浏览 器 。 


Have a question about Firefox? Seareh the Knowledge Dan 
check out the tutonals and referenee articles below 


) Firefox -- 
也 


图 1.10 了 正 8 浏 览 器 图 1.11 Firefox 浏览 器 
在 这 两 种 浏览 器 中 ， 正 浏览 器 使 用 最 简单 ， 占 用 计算 机 资源 少 ， 而 Firefox、Maxthon 以 其 个 性 化 
设置 也 吸引 了 众多 爱好 者 ， 其 缺点 是 占用 了 较 多 的 计算 机 资源 ， 容 易 造 成 计算 机 使 用 缓慢 。 用 户 在 使 
用 时 可 以 根据 需求 选择 不 同 的 浏览 器 查看 设计 的 页 面 效果 。 


1.4 HIML、XML 和 XHTML 语言 


最 初 HTML 仅 允 许 研究 人 员 以 一 种 非常 高 效 的 方式 在 互联 网 上 共享 信息 ， 但 是 当 网 页 浏览 器 这 一 
工具 变 得 复杂 、 多 样 化 之 后 ， 设 计 人 员 可 以 在 页 面 中 放 入 更 多 的 不 同形 式 的 文件 ， 如 图 像 、 音 频 。 因 
此 ， 网 页 开发 人 员 开始 为 HTML 语言 加 入 了 更 多 的 标签 ， 而 使 本 来 设计 简单 的 HTML 开始 变 得 丰富 。 
但 其 带 来 不 利 的 结果 是 使 HTML 使 用 规则 变 得 混乱 ， 这 时 就 需要 新 的 规则 来 约束 网 页 的 定义 ， 使 同样 
内 容 的 网 页 在 不 同 浏览 器 中 显示 一 样 的 结果 ，XML 在 这 个 方向 发 挥 着 重要 的 作用 。 
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1.4.1 超 文本 标记 语言 HTML 


HTML 是 一 种 用 来 制作 超 文本 文档 的 简单 标记 语言 ， 用 其 编写 的 超 文本 文档 称 为 HTML 文档 ， 它 
能 独立 于 各 种 操作 系统 平台 。 

1990 年 以 来 , HTML 一 直 被 用 作 World Wide Web 的 标准 表示 语言 , 用 于 描述 Homepage 的 格式 设 
计 以 及 它 与 WWW 上 其 他 Homepage 的 连接 信息 。 作 为 一 种 最 为 基础 的 语言 ， 人 们 使 用 它 描 述 的 文件 
需要 通过 WWW 浏览 器 显示 出 效果 。 

所 谓 超 文本 ， 因 为 它 可 以 加 入 图 片 、 声 音 、 动 画 、 多 媒体 等 内 容 ， 不 仅 如 此 ， 它 还 可 以 从 一 个 文 
件 跳 转 到 另 一 个 文件 ， 与 世界 各 地 主机 的 文件 连接 。HTML 的 作用 是 用 来 展示 页 面 的 表现 形式 ， 如 页 
面 的 布局 、 页 面 的 颜色 、 页 面 中 的 内 容 等 。 

HTML 已 经 成 为 全 球 信息 网 的 基础 , 它 提供 标准 化 的 方法 将 信息 格式 化 并 经 由 Internet 传送 给 全 世 
界 的 使 用 者 。HTML 为 人 们 的 传送 和 接收 信息 带 来 了 革命 性 的 变化 , 但 是 HTML 主要 是 被 设计 为 资料 


显示 之 用 。 
1.4.2 ”可 扩展 标识 语言 XML 
HTML 的 焦点 几乎 完全 集中 在 信息 应 如 何 显示 上 ， 而 不 是 信息 的 内 容 及 它 的 结构 上 ， 所 以 新 规则 


中 需要 引入 XML。XML 和 HTML 的 作用 区 别 很 大 。 

XML 目前 推荐 遵循 的 是 W3C 于 新 世纪 初 发 布 的 XML 1.0. 和 HTML 一 样 ,XML 也 来 自 于 SGML， 
它 最 初 设计 的 目的 是 补充 HTML 的 不 足 ， 以 强大 的 扩展 性 满足 网 络 信息 发 布 的 需要 ， 后 来 逐渐 用 于 网 
络 数据 的 转换 和 描述 。 它 是 一 种 能 定义 其 他 语言 的 语言 ， 目 前 在 网 站 信息 传递 中 常用 的 RSS 就 是 典型 
的 XML 应 用 。 如 果 说 HTML 是 用 来 设计 页 面 的 布局 和 视觉 效果 ， 那 么 XML 是 用 来 描述 页 面 的 数据 
形式 和 结构 。 

需要 注意 的 是 ，XML 并 不 是 标记 语言 ， 所 以 它 不 是 HTML 的 升级 。 它 更 多 的 作用 是 对 HTML 做 
一 些 其 他 功能 的 补充 ， 而 仅 使 用 XML 是 无 法 写 出 页 面 的 。XML 文档 代码 如 下 : 

01 <?XML version="1.0"?> 

02 <myfile> 

03 ”<title> 我 的 文档 <ltitle> 

04 <author>Depp</author> 

05 <email>depp59@gmail.com</email> 

06 <date>20090109</date> 

07 </myfile> 


第 1 行 是 XML 文 档 的 声明 ,这 和 HTML 文档 很 像 .第 2 行 是 代码 的 根 元 素 ,类 似 HTML 中 的 <html> 
开头 标记 (参考 本 章程 序 1.1) 。 再 下 来 的 标记 是 描述 这 段 内 容 的 标签 ， 注 意 这 些 标 签名 称 都 是 可 以 随 
意 定义 的 。 如 果 读 者 愿意 ， 甚 至 可 以 用 中 文 写成 如 “< 标题 > 我 的 文档 </ 标 题 >” 这 样 ， 而 这 在 HTML 
中 是 不 可 以 的 。 


说 明 : XML 数据 是 使 用 脚本 实现 HTML 中 调用 和 互动 的 ， 所 以 使 用 XML， 必须 掌握 一 门 脚 
本 语言 的 使 用 技巧 。 
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1.4.3 ”可 扩展 超 文本 标识 语言 XHTML 


XHTML 是 2000 年 W3C 公布 发 行 的 ， 它 不 需要 编译 即 可 直接 由 浏览 器 执行 (属于 浏览 器 解释 型 
语言 ), 是 一 种 增强 了 的 HTML。 它 的 可 扩展 性 和 灵活 性 将 适应 未 来 网 络 应 用 更 多 的 需求 , 是 基于 XML 
的 应 用 。 可 以 说 XHTML 就 是 HTML 的 一 个 升级 版 本 ,它们 之 间 的 区 别 很 小 ， 有 时 在 使 用 上 很 难 分 清 
它们 之 间 的 界线 。 

XML 虽然 数据 转换 能 力 强大 , 完全 可 以 替代 HTML, 但 面 对 成 千 上 万 已 有 的 站 点 , 直接 采用 XML 
还 为 时 过 早 。 因 此 开发 者 在 HTML 4.0 的 基础 上 ， 用 XML 的 规则 对 其 进行 一 些 扩 展 ， 由 此 得 到 了 
XHTML。 简 单 地 说 ， 建 立 XHTML 的 目的 是 为 了 实现 HTML 向 XML 的 过 渡 。 

正 是 因为 这 样 ，XHTML 文档 必须 使 用 小 写 ， 因 为 XML 是 大 小 写 敏感 的 ， 如 <H1> 和 <hl> 是 不 同 
的 标签 。 此 外 ，XHTML 中 要 求 标签 必须 有 始 有 终 。 当 然 从 页 面 设计 者 的 角度 来 说 ， 无 论 HTML 还 是 
XHTML 的 代码 写法 都 是 正确 的 。 为 了 更 严谨 的 写法 ， 使 用 XHTML 的 写法 要 求 未 尝 不 可 。 


1.5 编写 一 个 简单 的 页 面 


本 实例 的 目的 在 于 展示 一 个 页 面 制作 的 完整 代码 ， 其 中 涉及 一 个 重要 的 概念 一 一 网 页 的 超 链接 。 
单独 的 页 面 如 同一 本 书 中 的 一 页 ， 把 所 有 的 页 面 链接 在 一 起 ， 如 同 是 把 所 有 的 书页 装订 在 一 起 使 之 称 
为 书 ， 而 所 有 的 页 面 链接 在 一 起 称 之 为 网 站 。 

超 链接 是 网 页 独 有 的 特色 技术 ， 如 在 下 面 的 实例 中 ， 单 击 “ 这 是 我 的 第 一 个 网 页 ， 我 喜欢 HTML! 
您 可 以 单 击 这 里 ”链接 ， 页 面 会 跳 转 到 搜狐 主页 。 首 先 打开 记事 本 ， 输 入 程序 1.2 所 示 的 页 面 源码 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 1 章 \1-2 编写 一 个 简单 页 面 .html】 

【实例 1-2】 编 写 一 个 简单 页 面 ， 其 代码 展示 如 下 : 


程序 1.2 ”编写 一 个 简单 页 面 .html 


01 <!DOCTYPE html PUBLIC "-WW3CWDTD XHTML 1.0 TransitionaIWEN” 
02 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
03 <html xmlns="http://www.w3.orq/1999/xhtml "> 


04 <head> 

05 <meta http-equiv="Content-Type" content="text/html; charset=GBK"> 
06 <title>Hello! 欢迎 使 用 HTML</title> 

08 
09 是 我 的 第 一 个 网 页 ,我 喜欢 HTMLI! 您 可 以 单 击 这 里 

10 <H2><a href="http://www.sohu.com "> 

11 浏览 进入 搜狐 ， 查 找 您 感 兴趣 的 东西 ! 

12 </a> 

EE) </p> 

14 </body> 

15 </html> 
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[全 注意 : <a herf=""> 的 功能 是 链接 其 他 页 面 ， 本 书 会 在 后 面 的 章节 中 详细 介绍 。 


【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 1.12 和 图 1.13 所 示 。 


hse - 3 elev 欢迎 竺 用 HTN Wieroson iene pl rrr 
~ HE) 详 短 (四 二 尖 (a) 工具 (CT) 禄 册 (tl) E33 


Ga 日- 回国 多 | 有 Pa 六 vmx 加 
所 六 加 | 各 HI 技 本 关 Wavs 相 闫 ooeyoncat5.5.l6Wwebal | 图 转 到 流放” 
这 是 我 的 第 一 个 网 页 , 我 喜 

欢 HTML! 您 可 以 单 击 这 里 


1.12 编写 一 个 简单 的 页 面 1.13 第 一 个 页 面 效 果 


【深入 学 习 ] 输 入 结束 后 , 在 记事 本 中 将 文件 另存 为 以 .html 为 后 级 名 的 网 页 文件 , 如 图 1.12 所 示 。 
将 页 面 保存 为 一 个 具体 的 页 面 文件 存放 在 计算 机 中 ， 并 命名 为 “编写 一 个 简单 页 面 .html”。 


注意 : .html 后 缀 是 需要 设计 者 手动 去 修改 的 ， 系 统 默 认 情况 下 是 文本 后 组 .txt。 


最 后 在 浏览 器 中 打开 的 效果 如 图 1.13 所 示 ， 这 就 是 已 经 完成 的 页 面 。 
单 击 “ 浏 览 进入 搜狐 ， 查 找 您 感 兴趣 的 东西 ! ”这 一 链接 语句 ， 如 果 用 户 的 计算 机 已 经 连接 上 互 
联网 ， 则 页 面 会 转 入 搜狐 的 主页 。 


1.6 小 结 


本 章 是 HTML 的 入 门 部 分 ， 主 要 的 知识 点 有 : 

口 ” 网 页 的 概念 、 静 态 网 页 动态 网 页 及 常用 的 网 页 开发 工具 , 读者 通过 这 部 分 可 以 了 解 到 HTML 
页 面 的 内 容 形 式 和 开发 工具 。 

口 通过 了 解 网 页 浏览 器 的 工作 原理 和 常见 的 浏览 器 ， 可 以 认识 浏览 网 页 的 工作 方式 。 

口 HTML、XML 和 XHTML 之 间 的 联系 , XML 是 语言 规范 更 严谨 的 HTML, XHTML 是 HTML 
到 XML 的 过 渡 。 

口 最 后 通过 一 个 HTML 页 面 的 例子 ,展示 了 一 个 页 面 从 创建 到 最 终 成 型 显示 在 浏览 器 中 的 过 程 。 

在 接 下 来 的 章节 中 将 为 读者 揭 开 HTML 的 神秘 面纱 ， 学 习 HTML 语言 的 使 用 技术 。 
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第 2 章 通过 学 习 他 人 的 网 页 
了 解 革 TML 能 做 什么 


HTML 最 初创 建 的 目的 是 创建 一 种 文本 描述 语言 ， 发 展 至 今 ， 成 为 了 一 种 标记 语言 ， 以 十 分 直观 
的 方式 告诉 浏览 器 页 面 中 的 内 容 。 而 在 HTML 出 现 以 前 ,创建 一 个 可 以 展示 文档 内 容 、 包 含 多 媒体 信 
息 、 具 备 丰富 多 彩 动态 效果 的 文件 是 一 件 难以 想象 的 事情 ， 这 意味 着 如 果 想 通过 网 络 传递 信息 ， 只 能 
通过 Word 这 类 软件 。HTML 的 出 现 令 很 多 不 擅长 使 用 软件 的 人 一 样 可 以 享受 网 络 带 来 的 快捷 性 和 便 
利 性 。 本 章 将 介绍 HTML 语言 的 入 门 基础 ， 主 要 的 知识 点 如 下 。 
通过 怎样 的 方法 来 查看 网 页 的 源码 。 

HTML 语言 的 使 用 方法 。 
学 习 HTML 页 面 基本 的 结构 和 标签 。 
通过 HTML 页 面 的 实例 了 解 制作 简单 的 页 面 。 


OODODODO 


2.1 用 记事 本 打开 一 个 页 面 


文件 扩展 名 是 操作 系统 用 来 标记 文件 格式 的 一 种 机 制 。 扩 展 名 一 般 跟 在 文件 名 的 后 面 ， 由 一 个 分 
割 符号 隔 开 ， 如 film.avi，.avi 说 明 film 是 一 个 视频 ， 扩 展 名 就 如 同文 件 的 身份 说 明 ， 区 别 了 文件 的 类 
别 和 作用 。 

HTML 页 面 的 文件 后 级 名 是 .html 或 htm， 一 般 情况 下 ， 系 统 默 认 使 用 网 页 浏览 器 打开 。 这 种 情况 
下 ， 使 用 者 是 无 法 看 到 页 面 代码 的 ， 实 际 上 看 到 的 是 一 个 页 面 制作 的 最 后 展示 结果 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 2 章 \2-1 学 习 第 一 个 页 面 .html】 

【实例 2-1】 通 过 此 例 学 习 第 一 个 页 面 ， 其 代码 展示 如 下 : 


程序 2.1 ”学 习 第 一 个 页 面 .html 


01 <!IDOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitiona//EN" 
02 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
03 <htmlxmins="http://www.w3.org/1999/xhtml"> 


04 <head> 

05 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
06 <title>Untitled Document</title> 

07 <style type="text/css"> 

08 <I— 


09 body{ 
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【 运 


background-image:url( 图 片 /MIL.JPG); // 放 入 一 张 背景 图 像 
background-repeat: no-repeat:; 
} 
#Layer1 { 
position:absolute; // 确 定 页 面 层 的 位 置 
margin:0; 
left:247px:; 
top:395px; 
width:165px; /设置 页 面 的 宽度 
height:89px; // 设 置 页 面 的 高 度 
Z-index:1; 
} 
.style1{ 
font-size: 24px; /定义 文本 字体 的 样式 
font-weight: bold; 
color #FFFFFF; // 设 置 页 面 文 本 的 颜色 
} 
#Layer2{ 
position:absolute; 
left:408px; // 设 置 Layer2 在 页 面 中 的 位 置 
top:58px; 
width:190px; 
height:170px:; 
z-index:2; /2z 轴 方 向 的 高 度 
} 
一 > 
</style> 
</head> 
<body> 
<div class="style1" id="Layer1"> 
<form id="form1" name="form1" method="post" action=""> 
<! 一 这 里 是 页 面 中 的 表单 --> 
<label> 
<span class="style1"> 写 点 什么 吧 
</span> 
<textarea name="textarea" rows="3"></textarea> 
</label> 
</form> 
</div> 
<div class="style1" id="Layer2"> 嘿 .…. 我 想 ， 您 会 喜欢 上 做 网 页 的 </div> 
</body> 
</html> 


行程 序 】 浏 览 该 页 面 ， 如 图 2.1 所 示 ， 这 是 一 个 静态 页 面 。 
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第 2 部“ 通 过 学 习 他 人 的 网 页 了 外 FINITE 


昌 , .我 地， 你 会 
喜欢 上 做 网 页 的 


和 点 什么 吧 一 


图 2.1 学 习 第 一 个 页 面 


【深入 学 习 】 通 过 记事 本 打开 网 页 文件 可 以 看 到 代码 ， 右 击 网 页 空白 处 ， 在 弹出 的 快捷 菜单 中 选 
择 “ 查 看 源 文件 ”命令 ,系统 会 默认 在 记事 本 中 打开 源码 ， 如 程序 2.1 所 示 ， 在 这 个 页 面 的 代码 中 包含 
了 文本 内 容 、CSS 的 样式 表 、 一 个 简单 的 提交 表单 。 

一 个 完整 的 HTML 文档 包含 两 类 事物 ， 标签 和 页 面 内 容 。 放 在 “< >” 内 即 是 HTML 语言 标签 ， 用 
来 编辑 修饰 页 面 内 容 。 页 面 内 容 即 指 页 面 开发 者 想 放 入 页 面 的 文本 、 图 像 、 多 媒体 文件 等 ， 如 程序 2.1 
中 ， 页 面 内 容 是 “ 写 点 什么 吧 ” 和 “ 咽 … 我 想 ， 您 会 喜欢 上 做 网 页 的 ”两 句 话 和 作为 页 面 背景 的 图 片 。 

这 听 起 来 很 可 怕 ， 似 乎 编辑 页 面 需要 使 用 很 多 标签 ， 使 用 HTML 是 一 件 很 复杂 、 很 多 工序 、 很 麻 
烦 的 一 件 事 。 事 实 上 ， 真 相 远 远 没有 那么 复杂 。 虽 然 现 在 还 不 必 了 解 这 段 代码 的 含义 ， 但 还 是 做 个 简 
单 的 说 明 。 

程序 2.1 中 , 前 3 行 代码 即 <head> 之 前 的 部 分 是 代码 的 声明 部 分 ， 从 第 4 一 37 行 即 <head> 标 签 内 
的 代码 部 分 ， 针 对 所 要 设计 的 页 面 ，<head> 标 签 中 定义 了 两 个 层 的 区 域 : Layerl 和 Layer2， 分 别 是 
第 13 一 21 行 和 第 27 一 34 行 。 同 时 ， 定 义 了 一 个 CSS 样式 表 ， 从 第 22 一 26 行 ， 用 来 编辑 文本 样式 。 

从 第 38 一 50 行 ， 即 <body> 标 签 内 的 代码 ， 为 页 面 的 主要 内 容 ， 通俗 地 说 ， 可 以 认为 <body> 内 是 设 
计 者 放 入 需要 通过 浏览 器 展示 在 互联 网 上 的 内 容 。HTML 并 没有 很 慎 密 的 格式 规范 和 很 复杂 的 算法 研 
究 ， 本 书 会 在 后 面 的 章节 中 继续 详细 分 析 程 序 2.1。 


2.2 初 识 HIML 


HTML 不 是 一 门 程序 语言 ， 学 习 HTML 不 需要 任何 编程 基础 ， 相 对 于 计算 机 语言 如 C++ 或 Java 
来 说 ， 要 简单 得 多 ， 当 然 简单 并 不 意味 着 不 重要 ， 试 想 ， 如 果 互 联网 没有 了 网 页 ， 该 成 什么 样 ? 简直 


2.2.1 HTML 语法 


程序 2.1 中 ， 有 一 些 单词 放 在 <...> 中 ， 看 上 去 很 像 某 种 约束 好 的 特殊 定式 ， 如 果 尝 试 多 打开 一 些 
页 面 ， 会 发 现 很 多 页 面 中 都 有 <body></body><title></title> 这 样 的 标签 。 在 HIML 语言 中 ， 如 定式 


Ls 
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<body>.…</body> 被 称 为 标签 ， 其 作用 是 为 了 “标记 ”页 面 中 的 内 容 ， 使 浏览 器 能 够 识别 设计 者 的 要 求 ， 
正确 地 在 网 页 中 显示 出 来 。 使 用 标签 需要 遵循 3 点 规则 。 
口 ” 标 签 由 开始 标签 起 头 ， 一 定 要 有 对 应 的 结束 标签 来 收尾 ， 如 以 <body> 起 头 的 一 个 标签 ， 一 定 
要 有 </body> 来 收尾 。 


注意 : 有 部 分 标签 默认 情况 下 可 以 省 略 收尾 标签 ， 如 <p>、<div> 等 ， 但 并 不 表示 这 里 没有 


收尾 标签 ， 只 有 <link> 和 <base> 两 个 标签 除外 ， 可 参考 2.3.3 小节 。 


口 标签 中 的 属性 值 必须 放 在 引号 内 。 属 性 是 用 来 描述 一 个 事物 特征 的 表述 语言 。 例 如 ， 这 个 人 的 
身高 竟 有 2.26 米 。“ 身 高 ”就 是 描述 这 个 人 的 一 个 属性 。“2.26 米 ”就 是 这 个 属性 的 属性 值 。 
如 程序 2.1 中 的 第 45 行 : <textarea name="textarea" rows="3">， 表 明 在 这 个 命名 为 textarea 的 文本 
区 域 行 数 是 3，3 就 是 一 个 属性 值 。 像 这 种 表明 属性 的 值 需要 放 在 引号 内 。 
口 ” 对 同一 文本 使 用 多 个 标签 时 必须 按照 柑 套 的 原则 , 即 一 个 标签 必须 是 嵌 套 在 男 一 个 标签 内 使 用 。 
这 就 如 同 写 文章 时 的 规则 要 求 ， 使 用 大 小 括号 的 原则 : “ {大 括号 [中 括号 (小 括号 ) ]}”， 就 是 一 
个 典型 的 嵌 套 。 


2.2.2 ”HTML 文档 的 结构 


这 里 用 一 个 类 比 来 描述 HTML 文档 的 结构 ， 制 作 一 个 页 面 ， 可 以 把 页 面 看 成 是 设计 者 正在 描绘 的 
一 幅 人 体 的 “半身 像 ”。 首 先 ， 需 要 “一 块 画布 ”用 来 作画 ， 在 文档 中 ， 用 <html> 标 签 来 定义 网 页 的 
起 始 和 结束 。 然 后 ， 在 “画布 ”内 〈<html> 标 签 内 ) 编写 页 面 的 “ 头 部 ”〈<head> 标 签 部 分 )》 和 页 面 
的 “身体 ” (<body> 标 签 部 分 ) 。 这 样 ， 一 个 页 面 的 “ 形 ”就 建 出 来 了 ， 如 图 2.2 所 示 的 对 页 面 结构 
形象 的 描述 。 


说 明 : 具体 的 6 个 标签 将 在 2.3 节 中 详细 介绍 。 


2.2 页 面 代 码 可 分 为 <head> 和 <body> 


最 后 ， 在 “勾勒 好 的 形体 中 ”， 设 计 者 还 需要 给 这 个 “ 形 ” 添 加 一 个 “tile”， 给 页 面 起 名 。 那 么 
®' 
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一 个 HTML 文档 的 基本 结构 在 记事 本 中 写 出 来 ， 就 如 同 程序 2.2 所 示 了 。 
【本 节 示 例 参考 : 资料 光盘 \ 第 2 章 \2-2 HTML 文档 的 基本 结构 .html】 
【实例 2-2】 一 个 HTML 文档 的 基本 结构 源码 的 展示 如 下 : 

程序 2.2 ”HTML 文 档 的 基本 结构 .html 


01 <!IDOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" 
02 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
03 ”<html xmlns="http://www.w3.org/1999/xhtml"> 


04 <head> 

05 <title>Untitled Document</title> ” //head 部 分 是 页 面 头 部 
06 </head> 

07 <body> /body 部 分 是 页 面 身体 
08 </body> 

09 </html> 


注意 : <!- ...。 一 > 是 在 HTML 文档 中 对 代码 的 注释 ， 不 起 任何 作用 ， 可 以 在 任何 位 置 放 入 。 


【深入 学 习 】 在 这 样 的 结构 中 ， 首 先 遇 到 文档 中 的 样本 代码 ， 如 程序 2.2 中 的 第 1、2 行 。 然 后 是 
文档 中 的 <html> 标 签 ， 第 3 行 和 第 9 行 。 再 之 后 是 页 面 的 “ 头 ” 一 一 <head> 标 签 和 “身体 ”一 一 <body> 
标签 ， 如 代码 中 第 4 一 6 行 是 <head> 标 签 部 分 ， 第 7、8 行 是 <body> 标 签 部 分 。 

这 两 个 标签 和 <html> 标 签 是 “父子 ”关系 ， 即 <html> 标 签 是 父 级 ， 这 两 个 标签 是 子 级 ， 它 们 可 以 
放 在 <html> 标 签 内 使 用 ， 反 之 ， 如 果 <html> 标 签 放 在 它们 内 使 用 ， 则 不 行 。 

<html> 

<head> 

</head> 

<html> 


这 样 的 写法 是 正确 的 ， 但 是 如 果 出 现下 面 这 种 写法 : 
<head> 
<html> 
</html> 
</head> 
这 种 写法 是 不 可 以 的 。 
程序 2.2 中 第 5 行 的 <title> 标 签 就 是 用 来 为 页 面 定义 标题 的 ， 属 于 <head> 标 签 的 下 一 级 ，<title> 标 
签 通常 放 在 <head> 标 签 内 使 用 ， 反 之 则 不 行 ， 正 确 的 常用 形式 如 下 : 
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<head> 
<title> 
</title> 
</head> 
<title> 标 签 就 类 似 于 “页 面 头 部 内 的 眼睛 ”， 属 于 “ 头 ” 的 一 部 分 ，<title> 标 签 是 <head> 标 签 的 子 
级 。 所 以 ， 一 个 网 页 基本 结构 标签 的 嵌 套 关系 有 4 层 ， 如 图 2.3 所 示 为 页 面 层级 结构 。 


HTML 文 档 基本 结构 标签 的 关系 
HTML 文 档 
开始 标签 chtal> 样本 代码 


头 标签 chead》 体 标签 <body>》 


标题 标签 <title> 其 他 标签 


图 2.3 HTML 文档 基本 结构 标签 的 关系 


说 明 : 在 <head> 和 <body> 下 有 许多 不 同 的 父子 关系 的 标签 ， 在 这 里 并 没有 罗列 。 


当然 ， 如 果 设 计 者 希望 页 面 被 描绘 得 惟妙惟肖 、 棚 棚 如 生 ， 就 需要 了 解 更 多 的 HTML 语言 作用 和 
其 使 用 方法 ， 但 是 ， 任 何 页 面 的 结构 ， 或 者 说 “半身 像 ”总 是 由 “ 头 ” 和 “身体 ”组 成 的 ， 这 个 结构 
是 不 会 变 的 。 


2.3 HTML 文档 基本 结构 标签 的 作用 


页 面 文档 的 基本 结构 可 分 为 4 层 关系 ， 这 其 中 涉及 5 个 重要 的 结构 性 标签 用 来 构成 一 个 页 面 ， 分 别 
是 样本 代码 、 开 始 标签 、 头 标签 、 标 题 标签 和 文体 标签 ， 一 个 完整 的 页 面 通常 必须 具备 这 5 个 标签 。 
样本 代码 : 用 来 声明 代码 的 版 本 。 
开始 标签 : 定义 页 面 从 哪里 开始 到 哪里 结束 。 

头 标 签 和 头 标 签 的 对 象 : 有 6 个 特殊 的 标签 可 以 放 在 头 标签 中 使 用 。 
标题 标签 :设置 网 页 的 标题 名 。 
文体 标签 : 用 来 表现 网 页 的 主体 内 容 。 


2.3.1 给 页 面 一 个 声明 一 一 样本 代码 


在 网 页 代码 文档 中 ， 通 常 最 先 看 到 的 就 是 样本 代码 。 如 实例 2-3 中 的 语句 ， 就 是 一 段 样本 代码 的 
声明 。 


OOODODO 
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【实例 2-3】 样 本 代码 的 展示 ,其 源码 展示 如 下 : 


01 <IDOCTYPE html PUBLIC "J//W3C//DTD XHTML 1.0 TransitionaWEN" 
02 "http:/www.w3.org/TR/xhtmlTDTD/xhtml1-transitional.dtd"> 
【深入 学 习 】 样 本 代码 看 起 来 很 复杂 ， 似 乎 很 难 理解 。 实 际 上 ， 它 只 是 起 到 了 一 个 声明 的 作用 ， 
告诉 浏览 器 ， 所 书写 的 HTML 代码 的 版 本 。 代 码 中 DOCTYPE 即 Document Type 的 简写 ， 意 思 是 文档 
类 型 。 整 段 定义 了 设计 者 使 用 文档 类 型 的 定义 ， 然 后 把 这 些 信 息 传递 给 浏览 器 ， 浏 览 器 根据 设计 者 的 
定义 来 解析 代码 ， 展 现 出 相应 的 页 面 。 
这 一 段 的 含义 是 定义 了 网 页 文档 XHTML 1.0 Transitional， 人 允许 使 用 HTML 4 的 标签 ， 符 合 W3C 
(万 维 网 联盟 ) 的 标准 。 还 有 另 一 种 常用 的 样本 代码 ， 声 明 的 网 页 文档 是 XHTML 1.0 Strict。 
<IDOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Strict/EN" "http:/www.w3.org/TR/xhtml1/ DTD/xhtml1- 
strict dtd"> 
XHTML 1.0 Transitional 文档 和 XHTML 1.0 Strict 文档 的 区 别 在 于 ， 如 同 它们 的 命名 一 样 ， 前 者 是 
“过 渡 性 ”的 ， 允 许 使 用 HTML 4 的 标签 ， 而 后 者 丢弃 了 很 多 旧 的 标签 。 从 长 远 来 看 ， 后 者 是 针对 于 
CSS 的 使 用 原则 ， 严 格 规定 的 文档 类 型 。 当 读者 习惯 于 使 用 CSS 来 表现 网 页 时 ， 完 全 可 以 选择 后 者 。 
对 于 初学 者 来 说 ， 为 了 更 容易 地 理解 HTML 文档 ， 适 合 于 使 用 XHTML 1.0 Transitional 文档 。 


说 明 : 本 书 中 不 加 特殊 说 明 ， 都 遵循 于 XHTML 1.0 Transitional 文档。 


此 外 ， 还 有 一 种 比较 常见 的 声明 方式 ， 使 用 XHTML 1.1 文档 。 

<!IDOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.1 //EN" 

这 是 最 新 版 本 的 XHTML 1.1， 有 时 会 出 现 一 些 浏览 器 不 能 识别 部 分 HTML 标签 的 问题 。 样本 代码 
的 目的 是 为 了 验证 代码 文档 的 准确 性 ， 只 需要 在 开头 声明 即 可 ， 之 后 的 代码 中 无 须 再 次 声明 。 
2.3.2” 踏 出 制作 页 面 的 第 一 步 一 一 开始 标签 <html> 

从 <html> 标 签 开 始 ， 页 面 就 进入 设计 者 操作 的 领域 当中 ，<html> 标 签 的 作用 就 相当 于 设计 者 在 告 
诉 浏览 器 ， 整 个 网 页 是 从 这 里 开始 的 ， 然 后 到 </html> 标 签 这 里 结束 ， 好 像 在 记事 本 这 个 “画板 ”中 来 
确定 设计 者 的 “画布 ”是 哪 一 个 范围 。 一 般 来 说 ，<html> 标 签 放 在 样本 标签 之 后 。 在 严格 的 网 页 代码 
中 ， 通 常 以 如 下 的 形式 出 现 : 

<html xmlns=http://www.w3.org/1999/xhtml xml:lang="en"> 


说 明 : xmlns 和 xml:lang 是 XHTML 网 页 的 标准 要 求 ， 用 于 指定 与 该 标签 相关 的 一 些 信息 。 


2.3.3 ”页 面 的 脑袋 一 一 头 标签 和 头 标签 的 对 象 
在 2.2.2 小 节 中 一 个 页 面 的 结构 被 类 比 成 一 个 “半身 像 ”，<head> 标 签 是 页 面 的 “ 头 部 ”。 那 么 从 
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制作 页 面 的 功能 上 来 说 ， 头 标签 内 的 对 象 就 如 同 是 “ 调 色 板 中 的 颜色 ”。 

<head> 标 签 的 对 象 有 些 特 别 ， 一 般 来 说 ， 只 有 6 个 标签 能 放 在 <head> 标 签 内 ， 除 了 本 章 前 面 看 到 
的 标签 <title> 和 <meta>， 还 有 <link>、<base>、<style> 和 <script> 标 签 ， 设 计 者 使 用 这 些 标 签 ， 定 义 出 不 
同 的 “颜色 ”来 描绘 页 面 。 


会 注意 ;<head> 标签 没有 功能 性 作用 ， 重 点 是 了 解 <head> 标 签 的 对 象 ， 即 可 以 放 在 <head> 


标签 内 的 是 哪些 标签 ， 有 什么 具体 的 作用 。 


1. <meta> 标 签 
<meta> 是 HTML 文档 <head> 标 签 内 的 一 个 辅助 性 标签 ，<meta> 标 签 有 两 个 重要 的 属性 : name 和 
http-equiv, 通常 用 于 能 够 优化 页 面 被 搜索 的 可 能 。 具 体 的 写法 格式 一 般 是 , 在 name 后 输入 属性 , content 
后 输入 对 于 属性 具体 描述 的 词汇 。 如 程序 2.3 所 示 的 <meta> 标 签 的 使 用 。 
【实例 2-4】<meta> 标 签 下 name 属性 的 使 用 ， 其 源码 展示 如 下 : 


程序 2.3 ”页 面 头 部 分 


01 <head> 

02 <meta name="keywords" content="nine，twenty-three"> 
03 <! 一 搜索 引擎 的 关键 字 说 明 一 > 

04 < meta name="description"content="...... x 

05 <! 一 向 搜索 引擎 描述 主要 内 容 --> 

06 < meta name="generator"content="Dreamweaver"> 
07 <!-- 向 页 面 描述 生成 的 软件 名 --> 

08 < meta name="author" content="depp"> 

09 <! 一 向 页 面 说 明 设 计 者 姓名 一 > 

10 < meta name="robots" content="all"> 

11 <! 一 向 页 面 说 明 限 制 搜索 的 方式 --> 

Uy </head> 


【深入 学 习 】<meta> 标 签 下 不 同 的 属性 分 别 有 着 不 同 的 作用 ， 它 们 令 页 面 生动 ， 增 强 灯 和 力 。 
口 ” keywords: 向 搜索 引擎 说 明 页 面 的 关键 字 ，content 后 输入 供 搜索 的 具体 关键 字 。 
口 ”description: 向 搜索 引擎 描述 页 面 的 主要 内 容 。 
口 generator: 向 页 面 描述 生成 的 软件 名 ，content 后 面 输入 具体 的 软件 名 称 。 
口 author: 网 页 的 设计 者 ，content 后 面 输入 设计 者 的 具体 姓名 。 
口 robots: 限制 搜索 的 方式 ，content 后 面 通 常 可 输入 all、 none、index、noindex、follow、nofollow 
这 些 其 中 之 一 ， 不 同 的 属性 分 别 有 不 同 的 作用 ， 限 制 页 面 被 搜索 的 方式 。 
<meta> 标 签 下 另 一 个 属性 http-equiv， 其 作用 是 反馈 给 浏览 器 一 些 明确 的 信息 ， 来 帮助 浏览 器 更 精 
确 地 展示 页 面 。 如 实例 2.5 是 <meta> 标 签 下 http-equiv 属性 的 使 用 规则 。 
【实例 2-5】<meta> 标 签 下 http-equiv 属性 的 使 用 ， 其 源码 的 写法 如 下 : 
01 <head> 
02 <meta http-equiv="content-type" content="text/html: charset=gb2312" /> 
03 </head> 


。22 。 


第 2 章 通过 学 习 他 人 的 网 页 了解 HN 作家 和 于 


【深入 学 习 】 代 码 第 2 行 的 作用 是 告诉 浏览 器 , 该 页 面 所 使 用 的 字符 集 是 gb2312， 即 国际 汉字 码 ， 
如 果 当 使 用 者 浏览 有 这 段 代 码 的 页 面 时 ， 电 脑 内 又 没有 gb2312 字符 集 ， 浏 览 器 会 提示 使 用 者 ，“ 需 要 
下 载 xx 语 支持 ”。 
http-equiv 属性 下 ， 还 有 其 他 的 一 些 常 用 的 特殊 效果 ， 如 网 页 定式 跳 转 效果 。 程 序 2.4 表现 的 是 页 
面 自动 跳 转 的 功能 。 
【本 节 示 例 参考 : 资料 光盘 \ 第 2 章 \2-6 ”页面 自动 跳 转 实例 .html】 
【实例 2-6】 页 面 自动 跳 转 的 实例 ， 其 源码 展示 如 下 : 


程序 2.4 页面 自动 跳 转 实例 .html 


01 <html> 

02 <head> 

03 <title> 跳 转 页 面 的 实例 </title> 

04 <meta http-equiv="refresh" content="6; url=http://Wwww.baidu.com/"> 
05 </meta> 

06 </head> 

07 <body> 这 个 页 面 在 6s 后 自动 跳 转 到 百度 ，1、2、3、4、5、6 .…- 

08 </body> 

09 </html> 


【深入 学 习 】 本 例 第 4 行 是 实现 页 面 跳 转 的 代码 行 。 
口 refresh: 是 对 属性 的 具体 描述 ， 说 明 是 令 页 面 自动 跳 转 的 效果 。 
口 content: 后 面 输入 等 待 的 时 间 ，url 后 面 输入 跳 转 的 页 面 链接 地 址 。 
口 ”content="6; url=.… ": 作用 是 令 页 面 在 6 秒 后 页 面 自动 跳 转 到 设 定好 的 某 个 页 面 。 如 果 去 掉 url 
跳 转 的 链接 地 址 ， 所 起 的 作用 令 页 面 每 6 秒 刷新 一 次 。 


说 明 : <meta> 标 签 对 于 一 般 页 面 制作 者 来 说 ， 实 用 意义 不 大 。 在 大 多 数 网 页 中 ，<meta> 标 


签 也 只 是 用 来 定义 版 权 信息 。 


2.，<link> 标 签 

<link> 标 签 定义 了 一 个 外 部 文件 的 链接 ， 经 常 被 用 于 链接 外 部 CSS 样式 。 如 下 列 语句 表明 了 引用 
temp.css 文件 的 外 部 链接 。 

<link rel="stylesheet" type="text/css" title="temp" href="/temp.css/"> 

3. <base> 标 签 

<base> 标 签 为 整个 页 面 定 义 了 所 有 链接 的 基础 定位 。 其 主要 的 作用 是 为 了 确保 文档 中 所 有 的 相对 
URL， 都 可 以 被 分 解 成 正确 的 文档 地 址 ， 使 在 文档 本 身 被 移动 或 重 命名 的 情况 下 也 可 以 正确 解析 。 

<base href="http://www.ou-uo.com "/> 

在 创建 文档 集合 时 经 常 使 用 <base> 标 签 ， 为 了 不 会 破坏 文档 中 的 任何 链接 ， 使 用 者 通过 在 每 个 文 
档 中 放置 正确 的 <base> 标 签 ， 就 可 以 在 目录 甚至 服务 器 之 间 移 动 整个 文档 集合 。 
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让 全 注意 ，<link> 和 <base> 这 两 个 标签 在 写法 上 不 需要 封闭 


4. <style> 标 签 
<style> 标 签 用 来 定义 CSS 的 样式 。 使 用 方法 如 下 列 代码 ， 它 表明 了 在 页 面 中 引入 一 个 .style 的 样式 表 。 


<style type="text/css"> 
ei 
.style1 { 
font-size: 24px; 
font-weight: bold; 
color #FFFFFF:; // 这 里 定义 了 页 面 文本 的 字体 样式 、 颜 色 


-> 

</style> 

<style type="text/css"> 是 XML 的 标准 格式 ， 即 这 样 是 更 严格 的 写法 。 一般 情况 下 ， 省 略 text/css 也 是 
可 以 的 ， 大 部 分 浏览 器 都 能 辨识 <style> 标 签 ， 不 过 并 不 提倡 这 种 写法 ， 严 格 的 写法 才能 避免 出 现 朴 忽 。 


说 明 : 样式 表 是 CSS 学 习 中 一 个 重要 的 部 分 ， 在 本 书后 面 章节 有 大 量 的 内 容 介绍 CSS 样 


式 表 的 运用 法 则 。 


5。<script> 标 签 
<script > 标签 用 来 定义 页 面 内 的 脚本 ， 如 页 面 中 常用 的 脚本 语言 JavaScript， 通 过 <script> 的 事件 属 
性 来 放 入 HTML 文档 中 。 使 用 方法 如 下 : 


<script type="text/javacscript"> 
</script> 


本 关 。 说 明 ，<style> 和 <script> 标 签 会 在 后 面 的 章节 中 详细 介绍 。 


2.3.4 ”给 页 面 起 名 字 一 一 标题 标签 <title> 


<title> 也 是 <head> 标 签 的 对 象 ， 但 如 果 页 面 没有 标题 ， 那 么 所 有 的 页 面 标题 都 将 默认 为 Untitled 
Document。 所 以 ， 一 个 正规 的 页 面 必须 具备 页 面 标题 ， 而 <head> 标 签 中 的 其 他 5 个 标签 可 以 视 情 况 而 
选择 使 用 。 

<title> 标 签 是 本 书 中 的 一 个 表现 性 标签 , 什么 是 表现 性 标签 呢 ? 通俗 地 说 , 放 在 这 类 标签 中 的 文本 ， 
可 以 通过 浏览 器 展现 给 浏览 者 。<title> 标 签 必须 嵌 套 在 <head> 标 签 中 使 用 ,其 作用 是 用 来 定义 网 页 的 标 
题 ， 也 就 是 给 网 页 起 个 名 字 ， 如 程序 2.5 所 表示 的 <title> 标 签 的 使 用 方法 。 
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【本 节 示 例 参 考 : 资料 光盘 \ 第 2 章 \2-7 ”<title> 标 签 的 使 用 .html】 
【实例 2-7】<title> 标 签 的 使 用 ， 其 源码 展示 如 下 : 


程序 2.5 ”<title> 标 签 的 使 用 .html 


01 <html> 

02 <head> 

03 <title>title 标签 的 使 用 </title> 

04 </head> 

05 </html> 

【运行 程序 】 运 行 该 源码 ， 在 浏览 器 中 的 最 终 显示 效果 如 图 2.4 所 示 。 
He - Windows Intemet Explorer [eax] 
IDEAERER DCT 


文昌 “二 古旧 ”二 二 W。 收 家 RI 工 RD 加 


” “页面 的 标题 
PE ET ET 
图 2.4 <title> 标 签 的 使 用 
【深入 学 习 】<tile> 标 签 可 以 用 来 描述 这 个 页 面 的 主要 内 容 ， 可 以 使 用 户 方便 地 添加 到 收藏 来 。 给 
页 面 起 名 字 是 一 个 好 习惯 , 不 仅 便 于 对 页 面 的 管理 , 而 且 使 用 户 通过 页 面 标题 就 能 大 致 了 解 页 面 的 内 容 。 
2.3.5 页面 的 身体 一 一 体 标签 <body> 
如 果 说 <html> 标 签 定义 了 网 页 的 开始 和 结束 ， 那 么 <body> 标 签 的 作用 是 定义 了 网 页 主体 内 容 的 开 
始 和 结束 ， 网 页 主体 内 容 是 指 页 面 浏 览 者 能 够 在 浏览 器 中 看 到 的 网 页 中 的 内 容 。 设 计 者 把 网 页 主体 内 
容 放 入 <body> 标 签 内 ， 通 过 浏览 器 展示 在 互联 网 上 。 如 程序 2.6 中 <body> 标 签 内 的 文本 ， 代 码 中 的 第 6 
行 就 是 页 面 的 主体 内 容 。 
【本 节 示 例 参考 ; 资料 光盘 \ 第 2 章 \2-8 ”<body> 标 签 的 使 用 .html】 
【实例 2-8】<body> 标 签 的 使 用 ， 其 源码 展示 如 下 : 


程序 2.6 ” ”<body> 标签 的 使 用 .html 


01 <html> 

02 <head> 

03 <title>body 标签 的 使 用 </title> 

04 </head> 

05 <body> 

06 ”一 天 ，3 名 工程 师 一 同 驾车 去 旅游 。 半 路 上 车 子 坏 了 ,抛锚 了 。 机 械 工 程 师 说 :“ 可 能 是 … 
07 </body> 

08 </html> 


【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 2.5 所 示 。 
最 终 显示 在 浏览 器 上 的 效果 如 图 2.5 所 示 ， 原 先 代码 中 的 文本 出 现在 页 面 中 。 
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图 2.5 <body> 标 签 的 使 用 
【深入 学 习 】<body> 标 签 中 的 内 容 会 通过 浏览 器 展示 在 页 面 上 。 但 是 也 要 注意 ， 这 种 简单 的 文本 
页 面 会 受到 很 多 的 限制 性 ， 如 文本 换行 的 一 些 问题 。 那 么 如 果 为 了 实现 文本 的 换行 ， 在 编辑 HTML 实 
例 2-8 文档 时 ， 是 不 是 可 以 写成 这 样 呢 ? 


01 <html> 

02 <head> 

03 <title>body 标签 的 使 用 </title> 

04 </head> 

05 <body> 

06 ”一 天 ，3 名 工程 师 一 同 驾车 去 旅游 。 半 路 上 车 子 坏 了 ,抛锚 了 。 
07 

08 ”机 械 工 程 师 说 :“ 可 能 是 引擎 坏 了 吧 。” 电 子 工程 师 说 : “我 看 可 能 是 电路 板 短路 了 。” 
09 

10 ”电脑 工程 师 说 ，“ 嗨 ， 废 那 事 干 嘛 ， 直 接 重 启 不 就 完了 。” 
11 </body> 

12 </html> 


那么 实际 情况 会 不 会 像 代码 文档 写 的 那样 ， 文 本 自动 隔 开 段 落 呢 ? 实际 上 ， 最 后 的 结果 还 是 图 2.5 
的 样子 ， 浏 览 器 并 不 会 自动 识别 文本 的 版 式 。 所 以 ， 在 <body> 标 签 中 ， 排 版 文本 是 不 可 能 的 ， 因 此 ， 
为 了 使 设计 者 能 对 文本 做 大 量 的 排版 修改 ， 需 要 使 用 能 够 适用 于 <body> 内 的 标签 。 

<body> 标 签 内 的 对 象 有 很 多 ， 而 它们 好 比 是 设计 者 手中 的 “画笔 ”， 用 不 同 的 “画笔 ”才能 描绘 
出 不 同形 式 的 图 案 。 


注意 : 同 <head> 一 样 ，<body> 是 用 来 表明 页 面 的 结构 ， 重 点 是 <body> 标 签 的 对 象 ， 即 哪 
些 标签 可 以 放 在 其 中 使 用 和 如 何 使 用 (不 包括 <head> 内 的 6 个 标签 ) 。 可 以 说 ， 本 书 之 后 的 大 部 分 章节 


都 在 介绍 如 何 使 用 <body> 标 签 的 对 象 。 


2.3.6 美化 HTML 文档 


养 成 编写 格式 清晰 的 HTML 文档 的 习惯 是 很 重要 的 ， 不 仅 方 便 给 其 他 的 使 用 者 浏览 ， 也 便于 自己 
今后 的 再 修改 。 好 的 文档 能 体现 出 一 个 设计 者 的 思维 方式 。 一 个 好 的 HIML 文档 应 具备 以 下 3 个 方面 
的 条 件 。 
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口 ” 代 码 使 用 准确 规范 ， 不 应 有 错误 的 拼写 。 

口 ”代码 结构 清晰 ， 使 人 一 目 了 然 。 

口 没有 错误 或 者 多 余 不 必要 的 代码 出 现 。 

当然 ， 有 时 代码 错误 、 结 构 混乱 ， 浏 览 器 一 样 可 以 辨识 。 例 如 程序 2.6， 如 果 省 略 <head> 标 签 ， 把 
<title> 标 签 放 在 最 后 使 用 ， 写 成 如 下 样式 : 

01 <html> 

02 <body> 

03 ”一 天 ，3 名 工程 师 一 同 驾车 去 旅游 。 半 路 上 车 子 坏 了 ,抛锚 了 。 机 械 工程 师 说 :“ 可 能 是 引 … 

04 </body> 

05 ”<title>body 标签 的 使 用 </title> 

06 -</html> 


程序 2.6 最 终 依然 能 正确 地 显示 在 浏览 器 中 , 但 是 ， 对 于 设计 者 来 说 ,这 样 的 习惯 很 不 好 ， 随 意 的 
发 挥 看 似 提高 了 编写 的 效率 。 实 际 上 ， 面 对 大 型 网 站 页 面 编辑 ， 多 人 协作 情况 下 ， 代 码 的 混乱 会 造成 
很 多 不 必要 的 错误 和 返工 。 所 以 ， 从 简单 的 页 面 开始 ， 养 成 良好 的 编写 代码 的 习惯 也 是 成 为 一 个 优秀 
的 页 面 开 发 人 员 的 必要 条 件 。 


2.4 案例: 我们 的 第 一 个 页 面 


本 节 的 内 容 是 制作 一 则 语言 小 故事 。 首 先 ， 定 义 我 们 需要 制作 一 个 怎样 的 网 页 。 一 个 简单 的 页 面 ， 
里 面 有 一 段 文字 ， 这 个 页 面 需要 标题 ， 设 计 好 之 后 ， 就 有 了 一 个 明确 的 构思 。 

(1) 找到 需要 的 素材 ， 一 个 小 故事 ， 内 容 如 下 : 

一 只 小 猪 、 一 只 绵羊 和 一 头 乳牛 ， 被 关 在 同一 个 畜 栏 里 。 有 一 次 ， 牧 人 捉 住 小 猪 ， 它 大 声 号 叫 ， 
狐 烈 地 抗拒 。 绵 羊 和 乳牛 讨厌 它 的 号 叫 ， 便 说 : “他 常常 捉 我 们 ， 我 们 并 不 大 呼 小 叫 。” 小 猪 听 了 回 
答 道 : “ 捉 你 们 和 捉 我 完全 是 两 回 事 ， 他 捉 你 们 ， 只 是 要 你 们 的 毛 和 乳汁 ， 但 是 捉 住 我 ， 却 是 要 我 的 
命 呢 ! ” 

立场 不 同 、 所 处 环境 不 同 的 人 ， 很 难 了 解 对 方 的 感受 : 因此 对 别人 的 失意 、 挫 折 、 伤 痛 ， 不 宜 幸 
灾 乐 祸 ， 而 应 要 有 关怀 、 了 解 的 心情 。 要 有 宽容 的 心 ! 

(2) 给 网 页 起 一 个 标题 ， 根 据 这 个 小 故事 的 内 容 ， 把 标题 起 为 《宽容 》。 

(3) 编写 HTML 代码 。 网 页 的 标题 是 : 

<title> 宽 容 </title> 


然后 ， 网 页 的 主体 内 容 就 是 这 个 小 故事 ， 应 该 放 在 <body> 标 签 内 。 
<body>“ 一 只 小 猪 、 一 只 绵羊 和 一 头 乳 牛 ， 被 关 在 同一 个 畜 栏 里 。 有 一 次 ， 牧 人 捉 住 小 猪 ， 它 大 声 号 叫 ， 


但 是 捉 住 我 ， 却 是 要 我 的 命 呢 !<br> 

立场 不 同 、 所 处 环境 不 同 的 人 ， 很 难 了 解 对 方 的 感受 ， 因 此 对 别人 的 失意 、 挫 折 、 伤 痛 ， 不 宜 幸 灾 乐 祸 ， 而 应 要 
有 关怀 、 了 解 的 心情 。 要 有 宽容 的 心 ! ” 

</body> 
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说 明 : 文本 中 出 现 了 <br> 标 签 ， 它 的 作用 是 令 文本 换行 ， 本 书 第 3 章 中 会 详细 介绍 文本 排 


(4) 需要 加 入 样本 代码 ， 一 些 必需 的 结构 化 标签 ， 最 后 搭 在 一 起 的 完整 代码 如 程序 2.7 所 示 。 
【本 节 示 例 参考 ; 资料 光盘 \ 第 2 章 \2-9 一 则 寓言 故事 的 页 面 -html] 
【实例 2-9】 设 计 一 则 寓言 故事 的 页 面 ， 其 源码 展示 如 下 : 


程序 2.7 一 则 寓言 故事 的 页 面 .html 


01 <!IDOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 TransitionaWEN"” 
02 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
03 <htmlxmins="http://www.w3.org/1999/xhtml"> 


04 <head> 

05 <title> 宽 容 </title> 

06 </head> 

07 <body> 

08 一 只 小 猪 、 一 只 绵羊 和 一 头 乳 牛 ， 被 关 在 同一 个 畜 栏 里 。 有 一 次 ， 牧 人 捉 住 小 猪 …… 
09 </body> 

10 -</html> 


【运行 程序 这样, 整个 页 面 的 编辑 通过 4 步 流程 完成 , 最 终 显示 在 浏览 器 中 的 结果 如 图 2.6 所 示 。 


ee 
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绵羊 和 一 头 乳牛 ， 被 关 在 同一 个 畜 习 里 。 有 一 次 ， 


很 难 了 解 对 方 的 感受 ; 因此 对 别 
乐 袜 ， 而 应 要 有 有 关怀、 了解 的 心 


2.6 一 则 寓言 故事 


【深入 学 习 】 通 过 这 个 页 面 介绍 了 一 个 简单 的 设计 如 何 从 零 最 后 成 为 一 个 页 面 的 过 程 ， 设 计 的 想 
法 是 基于 对 页 面 制 作 技 艺 的 掌握 。 也 许 将 这 个 页 面 整 体 拆 分 开 ， 每 一 步 都 简单 易于 掌握 ， 但 是 如 果 想 
做 到 将 这 些 知识 捏合 在 一 起 付 诸 于 实践 ， 这 是 需要 不 断 地 练习 来 实现 的 。 


25 小 结 


本 章 介绍 了 开发 页 面 时 需要 具备 的 知识 点 , 通过 本 章 的 学 习 , 可 以 对 HTML 语言 有 个 整体 的 了 解 ， 
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可 以 由 理解 知识 走向 运用 知识 的 第 一 步 ， 可 以 亲手 去 制作 一 个 属于 自己 的 简单 页 面 。 本 章 的 主要 知识 
点 有 : 
口 页 面 代码 编辑 器 一 一 记事 本 。 通 过 记事 本 可 以 浏览 页 面 代码 ， 开 发 网 页 。 
口 了 解 HTML 页 面 中 使 用 标签 的 4 个 基本 的 规则 。 
口 了 解 一 个 HTML 页 面 基本 结构 和 基本 结构 的 标签 。 这 里 涉及 一 个 重要 的 概念 ; HTML 页 面 主 
要 由 <head> 标 签 部 分 和 <body> 标 签 部 分 组 成 ， 而 <head> 标 签 的 对 象 目的 是 为 了 表现 页 面 ， 
<body> 标 签 的 对 象 目的 是 为 了 展示 页 面 的 内 容 。 其 关系 如 同 “ 调 色 板 ”和 “画笔 ”。 
口 最 后 通过 一 个 简单 的 实例 ， 介 绍 了 一 个 简单 页 面 从 构思 到 做 出 设计 ， 从 设计 到 给 出 方案 ， 从 
实施 方案 到 最 后 成 品 完成 ， 最 后 在 浏览 器 中 查看 结果 。 
通过 本 章 的 学 习 ， 读 者 已 经 理解 如 何 把 页 面 内 容 放 入 到 页 面 中 去 ， 在 接 下 来 的 章节 中 ， 学 习 如 何 
在 页 面 中 编辑 、 修 饰 放 入 的 文本 。 
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静态 页 面 中 的 绝 大 部 分 内 容 由 4 类 属性 的 物质 组 成 : 文本 、 图 像 、 视 频 音频 等 多 媒体 文件 和 超 链 
接 。 本 章 从 编辑 文本 的 知识 点 开始 介绍 。 那 什么 是 文本 呢 ， 从 词 源 上 说 ， 表 示 “ 编 织 的 东西 ”。 当 然 
这 里 说 的 文本 既 不 是 指纹 理 编织 的 页 面 ， 也 不 是 指 某 种 计算 机 语言 ， 很 简单 ， 是 指 “ 书 写 下 来 的 任何 
语言 ”。 更 通俗 地 说 ， 本 章 将 学 习 如 何在 页 面 中 编写 设计 者 想 说 的 话 。 本 章 的 知识 点 如 下 。 
了 解 HIML 语言 区 分 清楚 旧 的 使 用 规则 和 新 规则 CSS 之 间 的 联系 和 不 同 。 
文本 排版 格式 :学 会 如 何 使 用 标签 实现 在 页 面 中 规范 写作 格式 。 
文本 样式 : 学 会 如 何 改 变 页 面 中 的 文本 的 基本 属性 和 如 何 使 用 一 些 特殊 的 符号 。 
文本 列表 : 学 会 在 页 面 中 使 用 无 序列 表 和 有 序列 表 来 罗列 条 目 。 
通过 实例 ， 学 会 在 页 面 中 编写 文本 、 项 目 列表 。 


OOODODO 


3.1 新 旧 方 法 对 比 


早期 的 HTML 版 本 中 使 用 一 些 特殊 的 标签 来 编辑 文本 , 如 使 用 <em>.…</em> 标 签 来 强调 突出 文本 ， 
使 文本 具有 斜体 字 的 效果 。 但 是 这 种 方法 使 用 起 来 非常 繁琐 ， 对 于 不 同 段落 的 编辑 需要 重复 使 用 ， 工 
作 量 很 大 ， 也 给 之 后 的 再 次 修改 带 来 很 多 麻烦 。 随 着 HTML 的 发 展 ， 设 计 者 发 据 了 更 多 的 标签 来 美化 
文本 。1994 年 ， 一 位 叫 哈 坤 。 利 的 设计 者 提出 用 “ 层 登 式 ” 概 念 的 样式 表 来 编辑 文本 。 在 1996 年 底 ， 
这 种 方法 被 正式 推出 ， 发 展 至 今 就 是 现在 大 家 比较 熟悉 的 CSS。 其 就 像 是 哈里 波 特 的 魔法 ， 令 本 来 需 
要 一 步 步 去 完成 的 工序 念 动 一 下 咒语 ， 有 瞬间 就 改头换面 。 这 种 奇妙 的 技术 难道 不 令 人 感到 兴奋 吗 ? 

下 面 通过 一 个 小 例子 来 感受 一 下 新 旧 方法 的 区 别 。 如 果 读 者 现在 对 CSS 完全 不 了 解 、 看 不 懂 也 没 
有 关系 ， 后 面 的 章节 将 会 详细 介绍 ， 这 里 有 个 感性 的 认识 即 可 。 在 早期 的 旧 方法 中 ， 使 用 大 量 的 特殊 
标签 来 编辑 文本 ， 如 程序 3.1 使 用 的 是 旧 方法 。 现 在 ， 在 新 方法 中 ， 使 用 CSS 来 编辑 文本 ， 如 程序 3.2 
所 示 。 

【本 节 示 例 参 考 ， 资 料 光 盘 \ 第 3 章 \3-1 ” 旧 方 法 : 使 用 特殊 标签 .html】 

【实例 3-1】 旧 方法 一 一 使 用 特殊 标签 ， 其 源码 展示 如 下 : 


程序 3.1 使 用 特殊 标签 .html 
01 <html xmlns="http://www.w3.org/1999/xhtml"> 


02 <head> 

03 <title> 使 用 旧 方 法 

04 <! 一 页 面 的 标题 一 > 
05 </title> 


06 </head> 
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07 ”<! 一 以 上 是 页 面 的 头 部 ， 以 下 是 页 面 的 身体 一 > 
08 <body> 


09 

10 

11 </body> 
12 </html> <body> 中 使 用 了 大 量 HTML 标签 


说 明 : <h2>、<em>、<strong> 这 3 个 标签 依次 定义 了 文本 字体 大 小 、 和 斜体 、 加 粗 的 效果 。 
需要 说 阴 的 是 ， 这 里 相同 的 标签 编写 了 两 次 。 


【本 节 示 例 参考 ， 资 料 光盘 \ 第 3 章 \3-2 ”新 方法 : 使 用 CSS.html] 
【实例 3-2】 新 方法 一 一 使 用 CSS， 其 源码 展示 如 下 : 
程序 3.2 使 用 CSS.html 


01 <html xmlns="http://www.w3.org/1999/xhtml"> 
02 <head> 
03 <title> 使 用 新 方法 
04 <! -页 面 的 标题 --> 
05 </title> 
06 <styletype="text/css"> 
07 <!- 
08 .style1{ 
09 font-size: xx-large; // 设 置 字体 大 小 
10 font-style: italic; // 设 置 字体 样式 
11 font-weight: bold; // 设 置 字体 样式 
2 
13 -> 
14 </style> 
</head> 
<! 一 以 上 是 定义 页 面 的 头 部 ， 用 来 定义 修饰 页 面 的 样式 表 ， 以 下 是 页 面 的 结构 ， 使 用 样式 表 来 布局 页 面 --> 
<body> 


内 家 好 ， html 语言 并 不 难 </p> | <body> 中 的 对 象 引用 使 用 了 
区 力 一 定 能 学 得 很 好 </p> .stylel 样式 表 

</body> 
</html> 


说 明 : style 00 是 引用 CSS 样式 表 的 一 种 特定 格式 ，font-size、font-style、font-weight 依次 


定义 了 文本 字体 大 小 、 样 式 、 粗 体 。class 语句 是 对 style1 样式 的 调用 。 


【运行 程序 】 实 例 3-1 和 实例 3-2 在 浏览 器 中 的 查看 结果 如 图 3.1 所 示 。 
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3.1 新 旧 方法 在 浏览 器 中 查看 的 结果 


ws 注意 : 程序 3.1 和 程序 3.2 在 浏览 器 中 查看 的 结果 是 一 样 的 。 


【深入 学 习 ]】 在 实例 3-1 旧 方法 中 ， 对 “大 家 好 ，html 语言 并 不 难 ” 编 辑 时 ， 使 用 了 <h2>、<em>、 
<strong> 标 签 。 对 “努力 一 定 能 学 得 很 好 ”这 人 句 编辑 时 , 为 了 实现 同上 一 句 同样 的 效果 , 再 次 使 用 了 <h2>、 
<em>、<strong> 标 签 。 注 意 这 里 只 重复 编写 了 两 次 同样 的 标签 ， 编 写 者 不 得 不 重复 相同 的 工作 ， 不 仅 
工作 效率 低 而 且 代 码 不 便于 管理 。 而 CSS 就 像 在 念 动 咒 语 一 样 ， 调 用 了 语句 class="style1"， 文 本 就 发 
生 了 惊人 的 改变 。 

正 是 CSS 的 出 现 ， 解 决 了 这 种 繁琐 的 重复 编写 的 工作 ， 它 彻底 将 页 面 的 表现 和 页 面 的 结构 两 者 完 
全 划 清 界线 ， 虽 然 这 样 增加 了 前 端 页 面 开 发 的 难度 ， 但 却 带 来 了 更 快 的 效率 。 不 仅 如 此 ，CSS 还 能 实 
现 更 多 的 优秀 效果 。 


mm 


3.2 文本 的 排版 格式 


HTML 文档 中 使 用 不 同 的 标签 来 设计 文本 的 排版 ， 试 想 如 果 在 阅读 一 份 报纸 时 ， 人 们 可 以 忍受 这 
份 报纸 字体 大 小 不 一 、 标 题 位 置 混乱 、 排 版 更 是 无 比 糟糕 的 效果 吗 ? 如 图 3.2 这 样 的 排版 ， 甚 至 找 不 到 
它 的 标题 在 哪里 。 
巴黎 
只 需 一 件 鲜艳 单 品 就 能 让 冬季 造型 远 高 沉闷 ， 它 
可 以 是 一 条 和 牛仔裤、 一 顶 贝 雷 相 ， 也 可 以 是 一 头 
火焰 般 的 长 发 。 
纽约 
款式 经 典 甚至 老式 的 针织 衫 者 
能 带 给 你 一 个 温暖 又 时 区 的 冬 
季 ， 复 古 还 是 前 卫 则 取决 于 下 
半身 穿 什么 


3.2 ”糟糕 的 版 式 


像样 的 文本 排版 需要 注意 一 些 重要 的 细节 ， 如 字体 大 小 、 行 距 、 段 落 间距 、 每 行 字数 等 。 本 章 会 
在 后 面 的 小 节 中 穿插 介绍 这 些 排版 细节 ， 一 个 工整 清洁 的 文本 排版 才 会 令 人 和 舒适。 
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3.2.1 写 一 行 换 一 行 

一 般 页 面 文本 每 行 的 字数 在 35 字 左右 ， 这 个 没有 一 定 的 规定 ， 原 则 是 只 要 每 行 控制 在 恰当 的 长 度 
内 就 可 以 了 。 太 短 了 浏览 者 需要 频繁 阅读 下 一 行 ， 太 长 了 浏览 者 又 需要 左右 移动 视线 ， 这 样 会 令 浏览 
者 在 阅读 页 面 文本 时 感到 不 舒服 。 在 HTML 文档 中 ， 可 以 使 用 以 下 的 <p> 标 签 或 <br> 标 签 方式 使 文本 
换行 。 它 们 的 写法 是 : 


<p>...</p> 
<br>...</br> 


<p> 标 签 对 文本 的 定义 是 <p>.…</p> 内 的 文本 是 一 个 段落 , 如 程序 3.3 所 示 为 <p> 标 签 在 HTML 中 的 
使 用 方法 。 
【本 节 示 例 参考 : 资料 光盘 \ 第 3 章 \3-3 ”使 用 <p> 标 签 .html】 
【实例 3-3】 使 用 <p> 标 答 ， 其 源码 展示 如 下 : 


程序 3.3 使 用 <p> 标 签 .html 


01 <html> 

02 <head> 

03 <title> 如 何 使 文本 换行 </title> 

04 </head> 

05 <body> 

06 MSN Space 对 HTML 语言 具有 相当 强大 的 支持 能 力 。<p> 虽 然 处 理 日 志 时 ，MSN 


07 ”Space 只 提供 给 大 家 简单 的 几 个 文字 处 理 功 能 ， 但 如 果 你 事先 在 网 页 编辑 器 中 对 文字 图 片 作 预先 处 理 ， 
08 ”<p> 那 么 通过 简单 的 复制 粘贴 后 ， 便 能 让 你 的 日 志 看 上 去 更 生动 活 泌 。 
09 </body> 
10 </html> 
<br> 标 签 对 文本 的 定义 是 <br>.…</br> 内 的 文本 从 <br> 标 签 后 另 起 一 行 ， 在 HTML 中 的 使 用 方法 如 
程序 3.4 所 示 。 
【本 节 示 例 参考 : 资料 光盘 \ 第 3 章 \3-4 ”使 用 <br> 标 签 .html】 
【实例 3-4】 使 用 <br> 标 签 ， 其 源码 展示 如 下 : 


程序 3.4 ”使 用 <br> 标 签 .html 


01 <html> 

02 <head> 

03 <title> 如 何 使 文本 换行 </title> 

04 </head> 

05 <body> 

06 MSN Space 对 HTML 语言 具有 相当 强大 的 支持 能 力 。<br> 虽 然 处 理 日 志 时 ，MSN 


07 “Space 只 提供 给 大 家 简单 的 几 个 文字 处 理 功 能 ， 但 如 果 你 事先 在 网 页 编辑 器 中 对 文字 图 片 作 预先 处 理 ， 
08 “<br> 那 么 通过 简单 的 复制 粘贴 后 ， 便 能 让 你 的 日 志 看 上 去 更 生动 活 泌 。 

09 </body> 

10 -</html> 
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【运行 程序 】 浏 览 这 两 个 页 面 ， 实 例 3-3 和 实例 3-4 在 浏览 器 中 的 效果 如 图 3.3 和 图 3.4 所 示 。 


Er TE ETE TE TE] 
(ers | 天 让 GO rw = ED [DR EE 
禄 收藏 史 。 | 症 如 何 使 文本 执行 玫 这 收 京 天 扰 加 何 使 六 本 执行 
JISN Space 对 HTIL 语 言 具 有 相当 强大 的 支持 能 力 。 MSN Space 对 HTIL 语 言 具 有 相当 强大 的 支持 能 力 。 
虽然 处 理 日 志 时 ，MSN Space 只 提供 给 大 家 简单 的 几 个 文 

虽然 处 理 日 志 时 ，JSN Space 只 提供 给 大 家 简单 的 几 个 文 字 处 理 功能 ， 但 如 果 你 事先 在 网 页 编辑 器 中 对 文字 图 片 
字 处 理 功能 ， 但 如 果 你 事先 在 网 页 编辑 器 中 对 文字 图 片 作 预 先 处 理 ， 
作 预 先 处 理 ， 有 人 让 捕 半 的 的 村 入 后 作风 上 的 旧 丈 生 在于 全 
那么 通过 简单 的 拷贝 粘贴 后 , 便 能 让 你 的 日 志 看 上 去 更 生 
动 活 泌 。 

电 我 的 电脑 了 起 100% ~ 时 我 的 电脑 0 

图 3.3 ”使 用 <p> 标 签 图 3.4 使 用 <br> 标 签 
【深入 学 习 】 使 用 <p> 标 签 使 文本 换行 时 行距 是 单 倍 行距 ， 而 使 用 <br> 标 签 时 ， 文 本 换行 行距 是 0 


倍 行距 。 
3.2.2 在 页 面 文本 中 空格 
在 正规 格式 的 文本 中 每 一 段落 的 开头 会 空 两 格 ， 而 在 HTML 源 文档 中 ， 连 续 输入 的 空格 键 会 被 默 
认为 只 有 一 个 空格 ， 所 以 ， 这 时 就 需要 使 用 特殊 的 空格 符号 放置 在 文本 中 。 空 格 符号 的 写法 是 : 
&nbsp; 
使 用 时 在 文本 中 需要 输入 空格 的 地 方 输入 “&nbsp:” 即 可 ， 如 程序 3.5 所 示 ， 在 同一 句 文本 中 分 别 
放 入 不 同 长 度 的 空格 数 ， 以 此 来 观察 中 间 的 区 别 。 
【本 节 示 例 参考 : 资料 光盘 \ 第 3 章 \3-5 ”使 用 空格 符号 .html】。 
【实例 3-5】 在 页 面 中 使 用 空格 符号 ， 其 源码 展示 如 下 : 


程序 3.5 使 用 空格 符号 .html 


01 <html> 

02 <head> 

03 <title> 使 用 空格 符号 </title> 

04 </head> 

05 <body> 

06 <p><font size="+3"> 空 格 123 符号 </font></p> 

07 <p><font size="+3"> 空 格 ”符号 </p> 

08 <p><font size="+3"> 空 格 &nbsp;&nbsp;&nbsp; 符 号 </p> 
09 </body> 

10 </html> 
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~ 说明: 第 7 行 代码 “空格 ”符号 ”中 ,输入 了 3 次 空格 ,第 8 行 代码 “空格 &nbsp;&nbsp;&nbsp; 


符号 ”中 ,输入 了 3 次 “&nbsp;”。 


【运行 程序 】 在 浏览 器 中 查看 的 结果 如 图 3.5 所 示 。 


[AT 
Gpooree ? uw ser P| 


空格 123 符 号 

空格 符号 

2 行 中 :1 

空格 从 本 药 2 行 ae| 
菩 = 行 中 s 个 空 多 | 

E | 


图 3.5 使 用 空格 符号 


说 明 : 第 2 行 的 “空格 符号 ”中 并 没有 体现 出 3 个 空格 ， 实 际 上 只 是 1 个 空格 的 间距 。 


【深入 学 习 】 空 格 符号 属于 HTML 中 的 一 种 特殊 符号 ， 如 果 设 计 者 不 想 使 用 “&nbsp;” 这 种 特殊 
符号 的 写法 ， 同 时 又 希望 保留 连续 的 空格 符 ， 可 以 使 用 一 个 特殊 用 途 的 标签 一 一 等 宽 字 体 。 该 标签 的 
写法 是 : 

<pre>...</pre> 
<pre> 标 签 的 作用 是 使 文本 格式 化 为 等 宽 字 体 ， 不 仅 能 够 保留 文本 中 的 空格 符 ， 也 能 使 文本 分 行 被 


保留 ， 如 程序 3.6 所 示 就 是 使 用 <pre> 标 签 来 实现 的 页 面 文本 排版 。 在 浏览 器 当中 显示 的 结果 如 图 3.6 
所 示 。 


【本 节 示 例 参考 ， 资 料 光盘 \ 第 3 章 \3-6 ”使 用 <pre> 标 签 .html】。 
【实例 3-6】 使 用 <pre> 标 签 ， 其 源码 展示 如 下 : 
程序 3.6 ”使 用 <pre> 标 签 .html 


01 <html> 

02 <head> 

03 <title> 使 用 <pre> 标 签 </title> 

04 </head> 

05 <body> 

06 <pre> 

07 君 不 见 黄河 之 水 天 上 来 ， 奔 流 到 海 不 复 回 。 
08 

09 君 不 见 高 堂 明镜 悲 白 发 ， 朝 如 青丝 暮 成 雪 。 
10 

11 人 生得 意 须 尽 欢 ， 莫 使 金 树 空 对 月 。 
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13 天 生 我 材 必 有 用 ， 千 金 散 尽 还 复 来 。 
14 </pre> 

5 </body> 

16 </html> 


ts 注意 : 页 面 中 的 文本 不 会 随 着 浏览 器 窗口 的 大 小 自动 换行 。 


【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 3.6 所 示 。 
【深入 学 习 】 如 果 删 除 实例 3-6 中 的 <pre> 标 签 ， 即 第 6 行 、 第 14 行 的 代码 ， 最 后 在 浏览 器 中 显示 


的 结果 如 图 3.7 所 示 。 
rr GE 
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如 不 见 黄 河 之 水 天 上 采 ， 价 族 到 海 不 复 回 。 
尊 不 见 商 堂 明镜 起 白 发 ， 彰 如 背部 各 成 全。 
人 生得 舍 央 尽 欢 ， 烘 使 会 树 空 对 月 。 


君 不 见 黄河 之 水 天 上 来 ， 奔 流 到 海 不 复 回 。 如 不 见 高 世 明 
RN 生 各 扫 导 生 和 本 = 锐 息 白 发 ， 朝 如 青 世 得 成 雪 。 人 生得 乾 须 尽 欢 ， 莫 使 多重 
空 对 月 。 天 生 我 村 必 有 用 ， 千 全 天 尽 还 复 来。 


十 了 | FE FE- | 
图 3.6 使 用 <pre> 标 签 图 3.7 没有 使 用 <pre> 标 签 
通过 对 比 图 3.6 和 图 3.7, 发 现在 没有 <pre> 标 签 的 文本 中 代码 不 辨识 连续 的 空格 符号 , 也 不 能 辨识 
文本 的 换行 。 如 果 设 计 者 是 用 记事 本 来 编写 代码 ， 当 然 <pre> 会 显得 实用 方便 一 些 ， 但 是 在 大 部 分 可 视 
化 页 面 文档 编辑 的 软件 中 ， 如 Dreamweaver， 使 用 这 类 软件 编写 时 则 很 少 出 现 <pre> 标 签 。 设 计 者 可 以 
根据 自己 的 习惯 ， 结 合 不 同 的 方法 来 选择 是 否 要 使 用 <pre> 标 签 。 


注意 : <pre> 标 签 尽量 不 要 大 量 地 使 用 ， 因 为 这 样 会 给 日 后 修改 代码 带 来 不 必要 的 麻烦 。 


3.2.3 文本 的 段落 要 对 齐 


编排 版 面 时 ， 时 常 需要 使 一 系列 的 文本 段落 按照 统一 格式 对 齐 ， 如 左 对 齐 、 右 对 齐 和 居中 对 齐 。 
实际 操作 时 ， 设 计 者 当然 不 是 使 用 一 堆 堆 的 空格 符号 来 一 格格 地 编排 文本 位 置 。 在 HTML 文档 中 , 文 
本 的 对 齐 是 通过 <align> 标 签 来 实现 的 ， 通 常 把 align 放 在 <p> 标 签 内 使 用 ， 如 下 所 示 : 

<p align=left>...</p> <! -- 左 对 齐 一 > 

<p align=center>...</p> <! 一 居中 对 齐 -> 

<p align=right>...</p> <! 一 右 对 齐 -> 

在 HTML 中 使 用 对 齐 属性 的 示例 如 程序 3.7 所 示 ， 其 将 不 同文 本 采用 不 同 的 对 齐 方式 放置 在 页 
面 中 。 
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【本 节 示例 参考 ; 资料 光盘 \ 第 3 章 \3-7 ”使 文本 段落 对 齐 .html】 
【实例 3-7】 使 文本 段落 对 齐 的 方法 ， 其 源码 展示 如 下 : 
程序 3.7 使 文本 段落 对 齐 himl 


01 <html> 

02 <head> 

03 <title> 如 何 使 文本 段落 对 齐 </title> 
04 </head> 

05 <body> 

06 <p> 文 本 段落 左 对 齐 

07 <p align=left> 文 本 段落 左 对 齐 
08 <p align=center> 文 本 段落 居中 对 齐 
09 <p align=right> 文 本 段落 右 对 齐 
10 </body> 

11 </html> 


说 明 : 默认 情况 下 可 以 省 略 </p>。 
【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 3.8 所 示 。 
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EE mmm] 
图 3.8 使 用 段落 对 齐 的 效果 

【深入 学 习 】 实 际 上 ，<p> 标 签 在 默认 情况 下 相当 于 <p align=left>， 所 以 在 浏览 器 中 查看 的 结果 如 
图 3.8 所 示 ， 默 认 情况 下 的 文本 是 和 窗口 的 左边 对 齐 。 

如 果 在 编辑 文本 时 对 于 所 有 的 文本 都 要 求 按 同 一 种 对 齐 方式 ， 那 么 在 使 用 的 过 程 中 可 以 对 文本 进 
行 全 局 定义 ， 而 并 不 需要 对 每 段 文本 添加 属性 命令 。 如 代码 第 7 一 9 行 中 是 不 需要 对 <p> 标 签 内 的 每 一 
段 文 本 依次 分 别 定义 ， 而 是 可 以 直接 放 在 <body> 中 使 用 ， 如 程序 3.8 所 示 为 对 整体 属性 定义 和 对 局 部 
属性 定义 同时 存在 的 效果 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 3 章 \3-8 ”对 整体 和 局 部 文本 使 用 对 齐 命令 的 效果 .html】 

【实例 3-8】 对 整体 和 局 部 文本 使 用 对 齐 命令 的 效果 ， 其 源码 展示 如 下 : 


程序 3.8 ”对 整体 和 局 部 文本 使 用 对 齐 命令 的 效果 .html 


01 <html> 
02 <head> 
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03 <title> 标 签 中 对 齐 属 性 的 应 用 </title> 


04 </head> 

05 <body style="text-align:center"> 

06 <h3> 蜀 相 </h3> 

07 <p style="text-align:right"> ( 唐 ) 杜甫 // 使 用 对 齐 命令 


08 <p> 丞 相 祠 堂 何 处 导 ， 锦 官 城 外 柏 森 森 。 
09 <p> 映 阶 脾 草 自 春色 ， 隔 叶 黄 酮 空 好 音 。 
10 <p> 三 顾 频 烦 天 下 计 ， 两 朝 开 济 老臣 心 。 
11 <p> 出 师 未 捷 身 先 死 ， 长 使 英雄 泪 满 襟 。 
12 </body> 

13 -</html> 


【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 3.9 所 示 。 


图 3.9 对 整体 和 局 部 文本 使 用 对 齐 命令 的 效果 


【深入 学 习 】 本 例 第 5 行 对 所 有 <body> 标 签 中 的 文本 定义 为 居中 对 齐 ， 这 样 就 不 需要 依次 对 每 一 
个 <p> 标 签 中 的 文本 进行 定义 。 同 时 在 全 局 定义 下 ， 代 码 中 还 有 对 局 部 的 定义 。 如 代码 第 7 行 中 ， 文 本 
被 定义 为 右 对 齐 。 那 么 代码 第 7 行 中 的 文本 最 后 是 居中 对 齐 还 是 右 对 齐 呢 ? 如 图 3.9 所 示 为 浏览 器 中 的 
结果 。 

结果 是 代码 第 7 行 中 的 文本 在 浏览 器 中 是 居 右 对 齐 的 。 所 以 HTML 语言 中 有 这 样 的 特性 ， 当 出 现 
两 个 或 两 个 以 上 同属 性 作用 的 标签 对 同一 个 对 象 作 用 时 ， 那 么 这 个 对 象 就 依照 就 近 原 则 ， 离 它 最 近 的 
那个 标签 属性 起 作用 。 例 如 ， 在 程序 3.8 中 ，<body> 中 添加 了 居中 对 齐 的 属性 命令 ， 本 来 应 该 对 所 有 
文本 都 起 到 居中 对 齐 的 命令 , 而 代码 第 7 行 的 <p> 中 添加 了 右 对 齐 的 属性 命令 , 它 也 对 第 7 行 的 文本 起 
作用 。 这 种 情况 下 ， 按 照 就 近 的 原则 文本 以 右 对 齐 的 形式 表现 了 出 来 。 


3.3 文本 的 属性 样式 


在 HTML 页 面 中 , 可 以 通过 使 用 不 同 的 标签 来 修改 文本 的 属性 , 使 页 面 内 容 起 到 不 同 的 显示 效果 。 
如 果 说 3.2 节 是 讨论 了 如 何 使 文本 版 块 的 布局 更 漂亮 ,那么 本 节 将 学 习 如 何 使 文本 自身 打扮 得 更 漂亮 丰 
富 些 ， 更 好 地 帮助 页 面 设计 者 把 想 说 的 内 容 传达 给 阅读 者 。 
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3.3.1 不 一 样 的 文本 字体 大 小 


早期 的 HTML 语言 中 ， 有 很 多 不 同 的 标签 来 实现 粗 体 、 斜 体 以 及 一 些 特殊 的 文字 字体 。 虽 然 大 部 
分 现在 已 经 很 少 使 用 ， 但 是 一 些 特 殊 的 标签 ， 如 粗 体 、 斜 体 等 ， 对 于 理解 学 习 HTML 语言 有 很 好 的 帮 
助 作用 。 下 面 是 本 节 的 知识 点 ， 把 需要 编辑 的 文本 放 入 相应 的 标签 内 ， 来 改变 文字 效果 ， 如 使 用 <em> 
标签 。 

<body> 

<p> 
<em> 文 本 内 容 </em> 
</body> 


说 明 : 当 CSS 出 现 后 ， 许 多 标签 渐渐 被 淘汰 ， 但 并 非 所 有 标签 都 抛弃 了 ， 一 些 常用 的 编辑 


文本 的 标签 如 表 3.1 所 示 。 
表 3.1 改变 字体 样式 的 标签 

标 签 说 明 
<h?>...</h?> ?代表 从 1 一 6， 依 此 改变 字体 从 小 到 大 
<strong>...</strone> 强调 文本 内 容 ， 通 常 是 粗 体 
<em>...</em> 强调 文本 内 容 ， 通 常 是 斜体 
<b>...</b> 粗 体 字 
<i>...</i> 斜体 字 
<u>.…</u> 加 下 划 线 
<Var>...</var> 变数 ， 通 常 是 斜体 字 
<cite>...</cite> 引文 ， 通 常 是 斜体 字 
<dfn>...</dfn> 定义 ， 通 常 是 斜体 字 ， 并 不 是 所 有 浏览 器 都 支持 
<address>...</address> 地 址 ， 通 常 是 斜体 字 
<t>...</t> 打字 机 等 宽 字体 
<samp>...</samp> 样本 
<code>...</code> 显示 原始 码 使 用 
<kbd>...</kbd> 键盘 输入 
<strike>...</strike> 加 删除 线 
<big>...</big> 稍 大 字体 
<small>...</small> 稍 小 字体 
<sup>...</sup> 数学 标记 中 的 上 标记 
<sub>...</sub> 数学 标记 中 的 下 标记 


对 照 表 3.1 的 标签 排列 , 如 程序 3.9 所 示 在 浏览 器 中 改变 字体 样式 的 标签 ,最 终 得 到 的 效果 如 图 3.10 
所 示 。 


【本 节 示 例 参考 : 资料 光盘 \ 第 3 章 \3-9 ”改变 字体 样式 的 标签 .html】 
【实例 3-9】 学 习 改 变 字 体 样 式 的 标签 ， 其 源码 展示 如 下 : 
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程序 3.9 改变 字体 样式 的 标签 -html 


01 <html> 

02 <head> 

03 <title> 改 变 字体 样 式 的 标签 </title> 

04 </head> 

05 <body> 

06 <br><h1>h1 标签 内 文本 样式 </h1> 

07 <br><strong>strong 标签 内 文本 样式 </strong> 
08 <br><em>em 标签 内 文本 样式 </em> 

09 <br><b>b 标签 内 文本 样式 </b> 

10 <br><i>i 标 签 内 文本 样式 </> 

11 <br><u>u 标 签 内 文本 样式 </u> 

12 <br><var>var 标签 内 文本 样式 </var> 

13 <br><cite>cite 标签 内 文本 样式 </cite> 

14 <br><dfn>dfn 标签 内 文本 样式 </dfn> 

15 <br><address>address 标签 内 文本 样式 </address> 
16 <br><tt>tt 标 签 内 文本 样式 </tt> 

17 <br><samp>samp 标签 内 文本 样式 </samp> 
18 <br><code>code 标签 内 文本 样式 </code> 
19 <br><kbd>kbd 标签 内 文本 样式 </kbd> 

20 <br><strike>strike 标签 内 文本 样式 </strike> 
2 <br><big>big 标签 内 文本 样式 </big> 

22 <br><small>small 标签 内 文本 样式 </small> 
23 <br> 数 字 标签 <sup>sup</sup> 

24 <br> 数 字 标签 <sub>sub</sub> 

25 ”</body> 

26 </html> 


【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 3.10 所 示 。 
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图 3.10 ”常用 文本 标签 在 浏览 器 中 的 查看 效果 
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注意 :<strong> 和 <b> 虽 然 显 示 的 结果 相同 ， 但 是 前 者 属于 逻辑 标记 ， 后 者 属于 实体 标记 。 
逻辑 标记 在 有 些 浏览 器 中 不 一 定 能 准确 显示 ， 而 实体 标记 则 显示 固定 的 效果 。 上 述 标签 中 ， 属 于 逻辑 标 


记 的 有 <strong>、<em>、<var>、<cite>、<dfn>、<address> 、<code>、<kbd>、<samp>、<tt> 标 签 ， 
属于 实体 标记 的 有 <i>、<b>、<u> 标 签 。 


【深入 学 习 】 现 在 读者 应 该 可 以 更 好 地 理解 本 章 第 3.1 节 程 序 3.1 中 的 例子 了 。 接 下 来 不 妨 再 多 思 
一 个 问题 , 参照 程序 3.3 的 例子 , 在 CSS 中 是 怎样 编辑 文本 的 样式 呢 ? <font> 标 签 是 不 是 用 来 描述 文 

本 的 属性 呢 ? 本 书 会 在 之 后 的 CSS 篇 章 详 细 谈 到 这 些 问 题 。 
3.3.2 ”奇妙 的 特殊 符号 

在 3.2.2 小 节 中 介绍 了 “&nbsp;” 空 格 符号 。 事 实 上 ， 在 HTML 语言 中 ， 类 似 空格 符号 这 样 的 标 
记 有 很 多 。 一 般 情况 下 ， 它 们 不 是 经 常 使 用 ， 所 以 大 部 分 并 不 常见 。 但 是 在 某 些 需 要 的 时 候 ， 设 计 者 
又 不 得 不 使 用 这 些 特殊 符号 ， 所 以 了 解 这 些 特 殊 符 号 并 没有 坏处 。 

特殊 符号 通常 有 它 固定 的 格式 ， 基 本 格式 为 “&.…:”。 例 如 ， 两 个 重要 的 很 有 意思 的 特殊 符号 ; 
注册 商标 “&reg;” 和 版 权 商 标 “&copy;”， 如 程序 3.10 所 示 将 这 两 个 特殊 符号 放 在 了 页 面 中 。 它 们 在 
浏览 器 中 显示 的 效果 如 图 3.11 所 示 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 3 章 \3-10 ”注册 商标 &reg; 和 版 权 商 标 &copy;.html】。 

【实例 3-10 】 两 个 特殊 符号 在 页 面 中 的 使 用 一 注册 商标 &reg: 和 版 权 商标 &copy:， 其 源码 展示 如 下 : 


程序 3.10 ”注册 商标 &reg; 和 版 权 商标 &copy;.html 


01 <html> 

02 <head> 

03 <title> 注 册 商 标 和 版 权 商 标 </title> 
04 </head> 

05 <body style="text-align:center"> 
06 <p> 注 册 商 标 &reg; 

07 <p> 版 权 &copy; 

08 </body> 

09 </html> 


【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 3.11 所 示 。 
| 可 注 基 育 标 和 版 权 育 标 “Nicresoft maE 世上 回 | 
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图 3.11 注册 商标 和 版 权 商 标 
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说 明 : 表 3.2 给 出 一 些 常用 的 特殊 符号 ， 有 兴趣 的 读者 不 妨 自己 动手 编写 一 下 ， 看 看 它们 的 


表 3.2 常用 的 特殊 符号 


字符 代 码 
引号 &quot: 
和 号 &amp: 
英镑 符号 &pound: 
竖 直 线 &brvbar: 
节 号 &sect. 
度数 符号 Kdeg: 
加 减 号 &plusmn: 
上 标 2 &esup2 
上 标 3 Rsup3: 

乘 号 &times 
除 号 &divide: 
AE 组 合 &AEli 
Ae 组 合 caeli 
< &fracl2 
四 分 之 一 &fracl4 
居中 的 点 &middot: 


3.3.3 ”给 文本 加 标注 

在 书本 中 ， 如 果 需 要 给 一 段 文章 中 的 某 一 个 名 词 标 加 注释 ， 只 能 在 那 段 文字 右上 角 添加 编 注 ， 然 
后 在 页 脚 的 位 置 给 出 解释 。 而 网 页 的 一 个 优势 是 设计 者 可 以 使 用 很 多 奇特 的 标签 ， 来 做 到 一 些 现实 中 
书本 无 法 做 到 的 效果 。 如 在 网 页 中 ， 如 果 设 计 者 希望 对 某 一 个 名 词 或 某 一 段 文 字 添 加 注释 ， 可 以 用 
<acronym> 标 签 ， 使 用 形式 如 下 : 

<acronym title="...">...<acronym>, 

注释 的 内 容 放 在 title 属性 后 的 引号 中 ， 被 注释 的 内 容 放 在 标签 内 。 如 程序 3.11 所 示 为 给 一 段 文本 
添加 标注 ， 藉 此 来 帮助 阅读 页 面 的 浏览 者 做 更 详细 的 介绍 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 3 章 \3-11 使 用 <acronym> 添 加 标注 .html】。 

【实例 3-11】 使 用 <acronym> 添 加 标注 的 方法 ， 其 源码 展示 如 下 : 


程序 3.11 使 用 <acronym> 添 加 标注 .html 


01 <html> 

02 <head> 

03 <title> 用 <acronym> 标 签 添加 标注 </title> 
04 </head> 

05 <body> 
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06 自 1851 年 英国 伦敦 举办 第 一 届 展 览 会 以 来 ， 

07 <acronym title=" 世 博 会 全 称 为 世界 博览 会 ， 世 界 博览 会 是 由 一 个 国家 的 政府 主办 ，.… 
08 </big></acronym> 

09 ” 因 其 发 展 迅速 而 享有 “经 济 、 科 技 、 文 化 领域 内 的 奥林匹克 盛会 ”的 美誉 。 按 照 国际 展 … 


10 </body> 
11 </html> 
【运行 程序 】 在 浏览 器 中 显示 的 效果 如 图 3.12 所 示 。 
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前 1851 年 英国 伦 吉 尝 办 机 一 策 民 光 以 幸 ，“ 付 博 全 呈 基 其 各 守 渤 二 直 友人 了 二 
化 和 的 机 人 的 委托 抽打 | 


类 世博 会 之 网 汪 办 一 次 ， 注 册 贡 世界 二 克 全 二 间 2 
全 坪 明 高 上 别 的 博 稚 会 。7010 上 海 志 丧 会晤 于 证 骨 兴 世界 二 从 会。 


当 鼠 标 移动 到 有 注释 的 文字 
时 ,网 页 会 自动 弹出 注释 标签 | 


图 3.12 使 用 <acronym> 给 文本 加 注释 
【深入 学 习 】 本 例 第 7 一 9 行 中 ，<big> 标 签 用 来 编辑 “世博 会 ”的 字体 大 小 ， 使 字体 相对 于 默认 
字体 稍稍 显得 大 一 些 。 在 页 面 中 添加 注释 时 ， 把 被 注释 的 对 象 放 在 <acronym> 标 签 内 ， 如 代码 中 的 “ 世 
博 会 ”这 个 名 词 ， 而 对 它 解释 的 内 容 则 放 在 <acronym> 内 title 属性 的 后 面 。 


3.4 整齐 的 文本 列表 


就 像 一 本 书 一 定 要 有 目录 一 样 。 网 页 上 的 信息 时 常 也 需要 用 列表 的 形式 表现 出 来 ， 如 一 些 目录 列 
表 、 菜 单 介绍 、 计 划 类 条 目 、 罗 列 并 列 关 系 的 段落 ， 以 此 来 帮助 浏览 者 更 便捷 地 获取 信息 ， 这 就 是 文 
本 列表 。 页 面 中 文本 列表 可 以 分 为 无 序列 表 、 有 序列 表 和 定义 列表 。 合 理 使 用 列表 ， 不 仅 能 传达 页 面 
的 信息 ， 有 时 还 能 起 到 美化 网 页 的 作用 。 

3.4.1 无 序列 表 

没有 编号 的 列表 称 为 无 序列 表 ， 无 序列 表 经 常见 于 项 目 说 明 ， 这 是 一 种 并 列 关系 的 列表 。 如 果 结 
合 CSS 的 修饰 作用 ， 它 还 可 以 表现 为 导航 栏 ， 在 页 面 中 的 作用 可 以 说 是 相当 有 意义 。 无 序列 表 以 <ul> 
标签 开始 ， 至 </ul> 标 签 结束 ， 在 <ul> 标 签 中 ， 还 需要 使 用 <li> 标 签 来 定义 列表 的 每 一 行 ， 具 体 的 写法 如 
下 所 示 : 


<ul> 
二 </l> 
二 </l> 
i </l> 
</ul> 
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使 用 这 样 的 列表 可 以 实现 做 一 些 有 趣 的 简介 类 条 目 ， 如 程序 3.12 所 示 就 表现 了 这 样 一 个 信息 登录 


的 页 面 。 
【本 节 示 例 参考 : 资料 光盘 \ 第 3 章 \3-12 ”制作 无 序列 表 .html】。 
【实例 3-12】 制 作 无 序列 表 的 方法 ， 其 源码 展示 如 下 : 
程序 3.12 ”制作 无 序列 表 .html 


01 <html> 

02 <head> 

03 <title> 制 作 无 序列 表 </title> 
04 </head> 


05 <body style="text-align:center > 
06 <h3> 个 人 简介 </h3> 


07 <ul> 

08 <li> 姓 名 : 
09 <p> 

10 <li> 年 龄 : 
11 <p> 

12 <li> 性 别 : 
13 <p> 

14 <li> 爱 好 : 
15 </ul> 

16 </body> 

17 </html> 


【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 3.13 所 示 。 


~ Microsoft Internet Explorer 
文 怕 F) 。 坊 氏 人 ] 查看 M 收藏 A) 工具 (7 才 押 [3 


O © 四 国人 BPar ens @ DD 
地 外 0) | 图 Cocunems and Settroxt 直 引 避 而 | 新 于 苹 本 立 鸭 tm] 园 特 到 侨 安 


个 人 简介 


BEES EE 


图 3.13 无 序列 表 


【深入 学 习 】 代 码 中 <ul> 标 签 内 的 部 分 ， 即 第 7 一 15 行 是 一 个 简单 的 列表 。 其 中 罗列 了 4 个 条 目 ， 
分 别 是 姓名 、 年 龄 、 性 别 、 爱 好 ， 每 个 条 目 之 间 用 <p> 标 签 空 一行 ， 使 每 一 条 目 之 间 空 开 一 行 ， 不 至 于 
显得 太 拥 挤 。 在 默认 情况 下 ， 无 序列 表 的 条 目 符号 是 实心 的 黑色 小 圆圈 ， 如 图 3.13 所 示 是 这 个 登录 信 
息 的 页 面 在 浏览 器 中 显示 的 结果 。 
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3.4.2 ”有 序列 表 


有 序列 表 中 的 条 目 依 次 按照 顺序 排列 。 有 序列 表 和 无 序列 表 之 间 的 唯一 区 别 体现 在 代码 上 ， 即 有 
序列 表 使 用 <ol> 标 签 ， 以 <ol> 开 始 ， 到 </ol> 结 束 。 有 序列 表 中 同样 使 用 <1i> 标 签 来 定义 列表 的 每 一 行 ， 
具体 的 写法 如 下 : 


<ol> 
<li>......</l> 
<li>......</l> 
<li>......</l> 
</ol> 


只 要 在 程序 3.12 中 做 一 些小 小 的 改动 , 将 代码 第 7 行 和 第 15 行 的 <ul> 标 签 替 换 成 <ol> 标 签 。 那 么 ， 
原先 的 无 序列 表 就 变 成 有 序列 表 的 样式 了 ， 如 图 3.14 所 示 就 是 有 序列 表 的 样式 ， 每 个 条 目 依次 排列 
数字 。 
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个 人 简介 
1. 姓名 : 
2. 年 龄 : 
3. 性 别 : 
4 爱好 : 
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3.14 有 序列 表 


3.4.3 ”定义 列表 


定义 列表 是 一 种 缩 进 样式 的 列表 ， 设 计 的 本 意 是 要 用 于 定义 术语 。 代 码 中 使 用 <dl> 来 创建 定义 列 
表 。 在 列表 中 使 用 <dt> 来 定义 页 面 中 的 每 一 行 。 与 有 序列 表 和 无 序列 表 不 同 的 是 ， 在 定义 列表 中 ， 列 
表 中 会 添加 缩 进 行 来 展示 这 个 列表 的 条 目 ， 使 用 <dd> 标 签 来 定义 缩 进行 。 它 的 代码 写法 如 下 : 
<dl> 
<dt>...</dt> 
<dd>...</dd> 
<dt>...</dt> 
<dd>...</dd> 
</dl> 


现在 使 用 定义 列表 举 一 个 简单 的 例子 ， 如 程序 3.13 所 示 为 使 用 定义 列表 来 表现 一 段 对 于 名 词 解 释 
的 页 面 ， 在 图 3.15 中 ， 可 以 看 到 这 个 定义 列表 在 浏览 器 中 的 效果 。 
【本 节 示 例 参考 : 资料 光盘 \ 第 3 章 \3-13 ”制作 定义 列表 .html】。 
【实例 3-13】 制 作 定义 列表 的 方法 ， 其 源码 展示 如 下 : 
»45°* 
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程序 3.13 制作 定义 列表 .html 


01 <html> 

02 <head> 

03 <title> 制 作 定义 列表 </title> 

04 </head> 

05 <body> 

06 <h3> 镜 头 画面 的 剪辑 </h3> 

07 <dl> 

08 <dt> 分 剪 </dt> 

09 <dd> 一 个 镜头 分 成 两 个 镜头 或 者 两 个 以 上 的 镜头 使 用 。</dd> 
10 <dt> 挖 剪 </dt> 

11 <dd> 将 一 个 完整 镜头 中 的 动作 、 人 和 物 运动 镜头 在 运动 中 的 某 一 部 位 上 的 多 
12 “” 余 的 部 分 挖 剪 去 。</dd> 

13 <dt> 拼 剪 </dt> 

14 <dd> 将 一 个 镜头 重复 拼接 。</dd> 

15 </dl> 

16 </body> 

17 </html> 


【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 3.15 所 示 。 


镜头 画面 的 双 辑 


分 革 
一 个 全 夭 分 段 两 个 全 头 或 看 两 个 以 上 的 镜 夭 便 用 . 
控 自 
将 一 个 完整 恒 夭 中 的 动作 、 人 和 和 物 运动 镜 藉 在 运动 中 的 
革 一 部 位 上 的 多 余 的 部 分 控盘 去 。 
拼 和 
将 一 个 镜头 重复 拼 搂 。 


ls. me 
图 3.15 使 用 定义 列表 
【深入 学 习 】 在 定义 列表 中 ， 放 在 <dd> 标 签 中 的 代码 会 作为 缩 进行 显示 在 浏览 器 中 。 此 外 ， 许 多 
页 面 设计 者 使 用 <dl> 和 <dd> 标 签 用 来 替代 <blockquote> 标 签 的 功能 ， 以 此 来 缩 进 文本 行 。 即 在 需要 缩 进 
的 文本 前 面 加 <dl><dd>， 在 文本 结束 的 地 方 加 上 </dl></dd>， 其 作用 和 <blockquote> 标 签 是 一 样 的 ， 该 
标签 使 内 容 缩 进而 不 将 其 视 为 定义 。 


3.4.4 ”列表 嵌 套 


通常 ， 在 设计 页 面 使 用 列表 时 经 常会 遇 到 将 一 个 列表 放 入 另 一 个 列表 中 的 情况 ， 以 一 个 列表 看 作 
一 个 新 列表 中 的 一 行 条 目 ， 这 种 情况 称 之 为 列表 嵌 套 。 列 表 芒 套 就 好 像 在 一 个 大 盒子 中 放 入 一 个 较 小 
一 些 的 盒子 ， 在 较 小 一 些 的 盒子 中 再 放 入 一 个 小 盒子 ， 总 之 就 是 盒子 装着 盒子 ， 列 表 和 典 套 就 是 列表 里 
面 还 有 列表 。 

无 论 是 无 序列 表 嵌 套 ， 还 是 有 序列 表 嵌 套 ， 或 者 是 无 序列 表 和 有 序列 表 的 混合 列表 ， 它 们 的 代码 
写法 都 是 一 个 原则 ， 就 是 遵从 HTML 代码 的 使 用 规则 ， 将 一 个 列表 的 标签 完全 放 在 另 一 个 标签 内 ， 这 
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是 一 种 父子 级 的 关系 。 如 程序 3.14 中 使 用 了 列表 赃 套 来 表现 书籍 的 目录 ， 这 种 方法 常用 来 表示 复杂 的 
导航 ， 应 用 广泛 。 

【本 节 示例 参考 : 资料 光盘 \ 第 3 章 \3-14 “列表 的 嵌 套 .html] 

【实例 3-14】 列 表 的 谈 套 ， 其 源码 展示 如 下 : 


程序 3.14 列表 的 做 套 .html 


01 <html> 

02 <head> 

03 ”<title> 列 表 嵌 套 </title> 

04 </head> 

05 <body> 

06 <h3> 四 大 名 著 </h3> 

07 <ulstyle="list-style-type:disc"> // 定 义 列表 的 项 目 符号 
08 <li> 列 表 一 


09 <ul style="list-style-type:circle"> 
10 <li>《 三 国 演义 》 


11 <ul style="list-style-type:square"> 

bb <li> 第 一 回 ” 宣 桃园 豪杰 三 结义 斩 黄 巾 英雄 首 立功 </li> 
13 <li> 第 二 回 ” 张 翼 德 怒 鞭 督 邮 何 国 舅 谋 诛 宦 坚 </> 

14 <li> 第 三 回 ” 议 温 明 董 卓 叱 丁 原 馈 金 珠 李 肃 说 员 布 </i> 
15 </ul> 

16 </li> 

17 <li> 《水浒 传 》 

18 <ol> 

19 <li> 第 一 回 ” 张 天 师 祈 福 瘟 疫 洪 太 尉 误 走 妖魔 </li> 

20 <li> 第 二 回 ” 王 教头 私 走 延 安 府 九 纹 龙 大 闲 史 家 村 </li> 
21 <li> 第 三 回 ” 史 大 郎 夜 走 华 阴 县 鲁 提 辖 涯 打 镇 关 西 </> 
22 </ol> 

23 </li> 

24 </ul> 


25 <ol style="list-style-type:upper-roman"> 
26 <li>《 西 游记》 


区 家 <ul> 

28 <li> 第 一 回 ” 灵 根 育 孕 源流 出 ”心性 修 持 大 道生 </li> 
29 <li> 第 二 回 ” 悟 彻 车 提 真 妙 理 ” 断 魔 归 本 合 元 神 </li> 
30 <li> 第 三 回 ”四 海 千 山 皆 拱 伏 ” 九 曲 十 类 尽 除名 </li> 
31 </ul> 

32 </li> 

3 <li> 《红楼 梦 》 

34 <ol style="list-style-type:upper-alpha"> 

35 <li> 第 一 回 ” 杜 士 隐 梦 幻 识 通 灵 贾 雨 村 风尘 怀 闺 秀 </li> 
36 <li> 第 二 回 ”村 夫人 仙 逝 扬州 城 冷 子 兴 演 说 荣 国 府 </li> 
37 <li> 第 三 回 ” 托 内 兄 如 海 荐 西 宾 接 外 孙 贾 母 惜 孤 女 </> 
38 </ol> 


。47 。 


SS 网 页 设计 洛 南 


39 </li> 


43 </html> 
【运行 程序 】 这 个 书籍 目录 的 页 面 在 浏览 器 中 的 显示 结果 如 图 3.16 所 示 。 
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XRO MD WU) GR TRD Nad 
六 着 WeE 


四 大 名 蔷 


一 级 列表 
Een 二 级 列表 


第 一 回 宫 梳 而 大 杰 三 结义 久 笠 店 茶 扩 症 立功 
三 画 辣 央 主 汪 过 三 级 列表 
和 三 回 汉 妈 明 村 可比 本 可 光环 地 走 识 呈 厕 
[5 
1 第 一 回 张 天 郑 折 汪 闪 度 洪 太 币 识 直 妖 交 
2 第 二 加 于 教头 区 直至 安 生 九 按 龙 大 亲 风 家 村 
3 第 三 回 史 大 部 认 走 华 全 县 委 埋 寻 学 全 关 否 
《本 游记 )》 
。 热 一 回 灵 要 育 孚 天 演出 “心性 眉 持 大 道生 
。 第 二 回合 入 要 近 夏 炒 理 ” 星 宁 本 合 元 术 
。 第 三 回 四 海 千 山 加 洪 伏 九 守 十 兴 肝 杂 名 
《gs 
人 第 一 回 各 十 隐 区 幻 训 灵机 十 村 风 全 剑 轩 静 
8 第 二 回 村 夫人 妨 泊 沁 州 赋 冷 了 兴 大 说 村 所 
第 三 回 托 内 宛如 海 入 本 宾 志 外 堆 转借 沽 女 


3 Ew 
图 3.16 列表 的 嵌 套 

【深入 学 习 】 该 页 面 中 包含 了 多 级 列表 的 嵌 套 ， 共 有 3 层 关 系 ， 最 外 层 的 是 一 级 列表 ， 虽 然 它 只 
有 一 个 列表 行 ， 即 条 目 “ 列 表 一 ”， 体 现在 程序 3.14 中 第 7 一 41 行 。 而 一 级 列表 的 条 目下 是 一 个 新 的 
无 序列 表 和 一 个 新 的 有 序列 表 ， 如 代码 中 第 9 一 24 行 是 无 序列 表 部 分 ， 第 25 一 40 行 是 有 序列 表 部 分 ， 
它们 是 二 级 列表 。 

在 无 序列 表 和 有 序列 表 下 ,分 别 有 两 个 列表 条 目 ， 无 序列 表 下 有 条 目 《 三 国 演义 》 和 《水 浒 传 》， 
有 序列 表 下 有 条 目 《 西 游记 》 和 《红楼 梦 》。 在 每 一 个 书 名 目录 下 ， 在 示例 中 用 列表 列举 了 章 回 目录 ， 
这 些 列表 则 是 全 局 的 三 级 列表 。 代 码 中 第 11 一 23 行 是 无 序列 表 下 网 套 的 列表 部 分 。 从 第 27 一 39 行 是 
有 序列 表 下 风 套 的 列表 部 分 。 

在 列表 媒 套 时 ， 不 同 级 的 列表 下 的 条 目 符号 都 是 不 同 的。 默认 情况 下 ， 无 序列 表 中 一 级 列表 是 黑 
色 实 心 小 圆 ， 二 级 列表 是 空心 小 圆 ， 三 级 列表 是 黑色 实心 小 方块 。 有 序列 表 无 论 是 哪 一 级 的 列表 ， 一 
般 都 是 以 阿拉 伯 数 字 为 条 目 符号 。 当 然 ， 如 果 设 计 者 改变 条 目 符号 的 样式 ， 可 以 通过 代码 定义 不 同 的 
样式 ， 条 目 符号 可 以 通过 添加 “style="list-style-type:.……"” 属 性 来 改变 。 

如 代码 第 7 行 、9 行 、11 行 、25 行 、34 行 中 , disc 是 实心 黑色 的 小 圆圈 , circle 是 空心 的 圆圈 , square 
是 实心 黑色 的 小 方块 ， 它 们 属于 无 序列 表 。upper-roman 是 大 写 的 罗马 数字 ，upper-alpha 是 英文 大 写字 
母 ， 此 外 还 有 属性 lower-alpha 是 小 写字 母 ，lower-roman 是 小 写 的 罗马 数字 。 本 例 正 是 通过 这 样 的 方式 
来 改变 列表 条 目 符号 的 样式 。 
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3.5 制作 一 则 通知 


本 节 结 合 前 面 所 学 的 知识 ， 通 过 制作 一 则 会 议 通知 来 整体 理解 本 章 的 知识 点 。 首 先 ， 制 定好 页 面 
的 内 容 ， 一 则 会 议 通知 需要 包括 通知 的 标题 、 通 知 的 内 容 ， 还 有 最 后 的 署名 。 
既然 分 为 3 个 部 分 去 完成 ， 就 可 以 一 次 针对 每 一 块 需求 来 编写 页 面 代码 ， 最 后 再 将 它们 整合 在 一 
起 编辑 格式 。 这 个 页 面 的 HTML 文档 如 程序 3.15 所 示 。 
【本 节 示 例 参考 ， 资 料 光 盘 \ 第 3 章 \3-15 一 则 会 议 通知 .html】。 
【实例 3-15】 制 作 一 则 会 议 通 知 ， 其 源码 展示 如 下 : 
程序 3.15 一 则 会 议 通知 .html 


01 <!IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

02 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

03 ”<html xmlns="http://www.w3.org/1999/xhtml"> 

04 <head> 

05 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
06 ”<title> 制 作 会 议 通知 </title> 


07 </head> 

08 ”<! 一 以 下 是 页 面 的 主体 部 分 一 > 

09 <body> 

10 ”<h2 align="center"> 关 于 会 议 的 通知 </h2> 


11 <p> 各 职能 处 室 : </p> 
12 定 于 X 月 X 日 召开 X X XX 会 。 现 将 有 关 事 宜 通知 如 下 : 


13 <br><pre> 

14 ”<ul><p><li> 会议 议题 : 

15 <p><li> “参加 人 员 : 

16 <br> 

17 <br> 二 二 和 一 一 一 三. 
18 <p><li> ”会 议 时 间 : 从 到 __ 结束 
19 <p><li> “会议 地 点 : 

20 <p><li> ”具体 事项 : 

21 <ol><li> 

22 <li> 

23 <li> 

24 </ol></pre> 

25 </ul> 

26 <p align="right"> 公司 

27 <p align="right"> 年 月 日 
28 ”</body> 

29 </html> 
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注意 : 因为 这 个 代码 中 使 用 了 <pre> 标 签 来 控制 排版 格式 ， 所 以 在 编写 代码 时 ， 要 特别 注意 
格式 的 工整 。 


【运行 程序 】 这 段 代 码 最 终 在 浏览 器 中 的 显示 结果 如 图 3.17 所 示 。 


图 3.17 制作 一 则 通知 


【深入 学 习 】 代 码 第 10 行 定义 了 通知 的 标题 ， 并 且 使 其 居中 显示 。 代 码 的 第 11 一 25 行 是 通知 内 
容 的 正文 部 分 ， 设 计 者 使 用 了 一 个 无 序列 表 来 罗列 通知 的 注意 事项 。 从 第 14 一 25 行 是 这 个 无 序列 表 ， 
其 中 在 描述 “具体 事项 ”时 ， 设 计 者 又 在 这 个 无 序列 表 中 嵌 套 了 一 个 有 序列 表 ， 用 来 罗列 “有 具体 事项 ” 
的 条 目 。 第 21 一 24 行 代码 是 一 个 有 序列 表 ， 最 后 第 26 行 和 第 27 行 代码 是 通知 署名 的 部 分 ， 并 使 之 右 
对 齐 显示 。 

如 果 将 这 个 页 面 上 传 到 互联 网 上 ， 便 可 以 提供 给 需要 者 下 载 使 用 ， 或 者 是 作为 表格 样板 直接 用 来 
打印 ， 这 样 就 避免 了 每 次 都 要 从 “我 的 电脑 ”中 搜寻 同样 版 式 的 表格 。 


3.6 小 结 


本 章 主要 学 习 了 文本 的 编排 ， 通 过 本 章 的 学 习 ， 读 者 可 以 练习 设计 纯 文 本 的 页 面 。 其 中 主要 的 知 
识 点 有 : 
使 用 <p> 或 者 <br> 进 行文 本 的 换行 。 
使 用 标签 改变 页 面 字 体 的 大 小 。 
使 用 对 齐 属性 改变 页 面 的 排版 。 
一 些 重要 的 特殊 标签 ， 如 空格 符号 、 <pre> 和 <acronym> 标 签 等 。 
在 页 面 中 使 用 列表 ， 以 及 如 何 运 用 列表 的 嵌 套 。 
最 后 ， 通 过 制作 一 则 通知 展示 了 本 章 所 学 知识 的 魅力 。 
当然 ， 一 个 页 面 中 仅 有 文本 是 不 够 的 ， 在 后 面 的 章节 中 ， 将 学 习 如 何 编辑 页 面 中 的 图 像 ， 使 设计 
出 来 的 页 面 更 加 丰富 多 彩 。 
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第 4 章 将 图 像 放 入 页 面 中 


一 个 页 面 中 ， 除 去 文本 部 分 ， 最 常见 的 文件 就 是 图 像 了 。 现 实 世 界 中 ， 人 们 所 指 的 图 像 最 常见 的 
英 过 于 相片 或 画 ， 专 业 照 片 是 记录 在 胶片 上 的 。 画 当然 是 描绘 在 画布 或 画 纸 上 的 ， 而 通常 所 说 的 数码 
相机 记录 下 来 的 数字 照片 ， 是 存放 在 存储 卡 上 的 。 存 放下 来 的 这 些 图 像 可 以 通过 不 同 的 浏览 器 被 阅览 ， 
而 这 种 图 像 才 是 我 们 所 要 关注 的 图 像 。 在 网 页 中 ， 一 张 图 像 可 以 大 到 获 盖 整个 页 面 的 背景 ， 也 可 以 小 
到 微不足道 的 一 个 logo， 它 们 在 不 经 意 间 充 斥 着 整 张 页 面 。 如 图 4.1 所 示 是 YAHOO 门户 网 站 的 一 张 
主页 。 


4.1 充斥 着 图 像 的 页 面 


YAHOO 主页 中 ， 图 像 所 占 的 面积 甚至 和 文本 所 占 的 面积 相当 。 这 样 ， 才 会 让 页 面 显 得 丰富 、 直 
观 、 不 呆板 、 吸 引 浏 览 者 的 眼球 。 本 章 的 知识 点 如 下 。 
计算 机 图 像 的 概念 。 
如 何 用 计算 机 术语 表达 图 像 。 
学 习 如 何 排版 图 像 。 
制作 自己 的 图 像 。 
使 用 技巧 来 美化 图 像 。 
设置 页 面 背景 。 
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4.1 图 像 的 基础 知识 


页 面 中 放 入 图 像 不 难 ， 使 用 HTML 标签 很 容易 就 可 以 做 的 ， 困 难 的 是 明白 放 入 什么 格式 的 图 像 ， 
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如 何 去 修 改 图 像 ， 如 何在 网 页 中 去 应 用 图 像 ， 这 些 知 识 基 于 需要 对 图 像 知识 有 个 清晰 的 认识 。 了 解 这 
些 ， 能 使 一 个 设计 师 在 制作 页 面 时 ， 更 加 游刃有余 、 得 心 应 手 。 


4.1.1 最 常用 的 图 像 一 一 位 图 


位 图 又 称 为 光栅 图 ， 是 由 许多 像素 组 成 的 图 ， 像 素 是 很 小 的 颜色 块 ， 如 马赛 克 一 样 ， 试 想 一 下 用 
小 瓷砖 拼 成 的 卫生 间 地 板 , 位 图 就 是 这 个 样子 。 如 图 4.2 所 示 是 一 张 被 放大 的 图 像 ， 当 图 像 中 模型 的 头 
部 放大 到 700 倍 时 ， 图 像 呈 现 出 锯齿 一 样 的 边缘 。 当 图 像 放 大 到 1400 倍 时 ， 看 到 的 图 像 具 有 一 个 一 个 
的 小 方 格 ， 这 每 一 个 小 方 格 ， 就 是 像素 。 像 素 表示 为 一 个 正方 形 的 颜色 块 。 


图 4.2 观察 图 像 的 像素 


注意 : 放大 原始 位 图 ， 能 使 图 像 效 果 失 真 ， 如 果 缩 小 原始 位 图 ， 同 样 会 使 图 像 效 果 失 真 ， 
这 是 因为 图 像 的 缩小 ， 减 小 的 是 图 像 中 像素 的 数量 。 


位 图 通常 又 被 分 为 8、16、24、32 位 图 。 这 并 不 是 说 只 有 8 种 颜色 ， 而 是 有 2 的 8 次 方 ， 即 256 
种 颜色 。 从 人 眼 的 感觉 来 说 ，16 位 色 基 本 能 满足 需要 了 。 而 24 位 色 又 被 称 之 为 “ 真 彩色 ”，2 的 24 
次 方 大 概 是 1677 万 之 多 ， 这 个 数字 差不多 是 人 眼 可 以 分 辨 颜色 数 的 极限 。 而 32 位 色 是 个 例外 ， 并 不 
是 说 有 2 的 32 次 方 之 多 的 发 光 数 ， 它 是 在 24 位 色 的 基础 上 加 入 了 256 阶 颜色 的 灰 度 。 

在 制作 页 面 时 , 设计 者 一 般 选 择 24 位 图 像 ，32 位 图 像 虽 然 质量 更 好 ,但 同时 也 带 来 更 大 的 图 像 容 
量 。 如 果 一 个 页 面 使 用 体积 过 大 的 画 ， 会 导致 浏览 者 浏览 页 面 的 拖 慢 ， 而 事实 上 ， 一 般 肉眼 也 很 难 分 
辨 24 位 图 和 32 位 图 的 区 别 。 


4.1.2 在 页 面 中 常用 的 位 图 格式 


生活 中 ， 画 的 种 类 可 以 分 很 多 ， 素 描 、 油 画 、 水 墨 画 等 。 在 计算 机 的 世界 里 ， 图 像 也 可 分 为 很 多 
种 格式 ， 但 问题 是 ， 人 们 和 凭借 肉眼 就 可 以 在 一 堆 画 中 分 辨 出 素描 和 油画 ， 却 不 可 能 凭借 肉眼 直观 地 分 
辨 计算 机 世界 的 图 像 ， 它 们 看 上 去 都 是 一 样 的。 虽然 人 眼 做 不 到 ， 而 我 们 的 帮手 计算 机 则 可 以 。 计 算 
机 可 以 把 不 同 的 图 像 定义 为 不 同 的 格式 ， 不 同 格式 的 图 像 有 它 自 己 的 属性 和 特点 ， 而 人 们 只 要 了 解 了 
不 同 格式 图 像 的 属性 和 特点 ， 就 能 掌握 运用 图 像 的 门道 。 在 页 面 中 ， 常 用 的 3 种 位 图 图 像 格式 分 别 是 
JPEG 图 像 、PNG 图 像 和 GIF 图像 。 

1. JPEG 格式 的 图 像 

JPEG 文件 是 最 常见 的 一 种 图 像 格式 之 一 ， 后 绥 名 是 .jpg， 几 乎 所 有 的 软件 或 平台 都 可 以 打开 它 ， 
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JPEG 文件 是 压缩 过 的 一 种 图 像 。 压 缩 的 图 像 可 以 保持 为 8 位 、24 位 、32 位 深度 的 图 像 ， 压 缩 比 率 可 
以 高 达 100 : 1。JPEG 可 以 很 好 地 处 理 大 面积 色调 的 图 像 ， 如 摄影 作品 、 相 片 。 但 它 不 适用 于 色彩 对 
比 强 烈 、 有 清晰 边界 、 简 单 构图 的 图 像 ， 如 logo、banner。 

2. PNG 格式 的 图 像 

PNG 文件 的 后 级 名 是 .png。 这 是 一 种 能 够 存储 32 位 信息 的 位 图 图 像 ， 采 用 的 是 一 种 无 损 压缩 的 方 
式 。 目前， 已 经 在 Web 上 广泛 流行 。 此 外 ， 它 支持 透明 信息 。 所 谓 透 明 ， 即 是 说 图 像 可 以 浮现 在 其 他 
页 面 文件 或 页 面 图 像 之 上 。 可 以 说 ，PNG 文件 是 专门 为 Web 创造 的 图 像 ， 通常 ， 大 部 分 页 面 设计 者 在 
页 面 中 加 入 Logo 或 一 些 点 级 的 小 图 像 ， 都 会 选择 使 用 PNG 文件 。 

3. GIF 格式 的 图 像 

GIF 是 一 种 图 像 交 互 格式 ， 后 级 是 .gif， 它 只 支持 256 色 以 内 的 图 像 。 所 以 ，GIF 文件 的 图 像 效 果 
是 很 差 的 。 但 是 ，GIF 文件 有 一 个 最 大 的 特点 ， 就 是 可 以 制作 动画 ， 图 像 制 作者 利用 图 像 处 理 软件 ， 
将 静态 的 GIF 图 像 设置 为 单 帧 画面 ， 然 后 把 这 些 单 帧 画面 连 在 一 起 ， 设 置 好 上 一 幅 画 面 到 下 一 幅 画 面 
的 间隔 时 间 ， 最 后 保存 为 GIF 格式 就 可 以 了 。 可 以 说 ， 这 就 是 简单 的 逐 帧 动画 。 目 前 这 种 格式 的 动画 
在 互联 网 上 广 为 流 行 。 

总 的 来 说 ， 这 3 种 图 像 在 使 用 上 各 有 千秋 ，JPEG 可 以 压缩 图 像 的 容量 ，PNG 的 质量 较 好 ，GIF 可 
以 做 动画 , 所 以 , 当 处 理 色 调 复 杂 、 绚丽 的 图 像 时 , 如 照片 、 图 画 等 , 适合 使 用 JPEG; 而 处 理 一 些 logo、 
banner、 简 单线 条 构图 时 ， 适 合 使 用 PNG; 而 GIF 通常 只 是 用 来 表达 动画 效果 。 

当然 ， 位 图 图 像 的 格式 还 有 很 多 ， 如 BMP、TGA、TIFF、PSD 等 ， 这 些 在 页 面 中 并 不 常用 。 这 些 
格式 的 图 片 容 量 都 较 大 ， 通 常 ， 图 像 设计 者 为 了 保证 图 像 的 质量 ， 使 用 这 些 格式 的 图 片 进行 设计 修改 ， 
最 后 成 品 仍 需要 转换 为 网 页 中 常用 的 图 像 格式 。 
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格式 的 图 像 。 


注意 : 对 于 图 像 使 用 ， 并 没有 特别 严格 的 要 求 ， 设 计 者 可 以 依照 自己 的 习惯 选择 使 用 不 同 


4.1.3 奇妙 的 矢量 图 


计算 机 中 显示 的 图 形 一 般 分 为 两 大 类 ， 前 面 章节 中 介绍 的 是 位 图 ， 这 是 其 中 一 种 ， 而 另 一 种 就 是 
矢量 图 。 矢 量 图 和 位 图 最 大 的 区 别 在 于 ， 前 者 无 论 图 像 大 小 的 缩放 ， 都 不 会 影响 其 效果 ， 而 后 者 会 有 
损 图 像 质量 。 如 图 4.3 所 示 ， 把 “小 乌龟 ”有 眼 部 放大 之 后 可 以 看 到 ，“ 眼 睛 ”部 位 的 边缘 并 没有 失真 。 
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图 4.3 放大 矢量 图 
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矢量 图 是 以 一 种 数学 描述 的 方式 来 记录 图 像 内 容 。 例 如 ， 一 个 方程 y=kx， 当 这 个 小 方程 体现 在 坐 
标 系 上 时 ， 设 置 不 同 的 参数 可 以 绘制 一 条 任意 角度 的 直线 ， 这 就 是 矢量 图 的 构图 原理 。 矢 量 图 一 般 以 
线条 、 曲 线 和 色 块 为 主 ， 不 易 制 作 色 调 丰 富 、 效 果 绚 丽 的 图 像 ， 其 文件 所 占 的 容量 也 比较 小 。 

矢量 图 由 于 其 可 以 随意 放大 缩小 的 特点 ， 通 常 被 看 作 是 一 种 图 像 模板 放 在 图 库 中 ， 方 便 设 计 者 备 
用 保存 ， 在 需要 时 拿 出 来 使 用 。 遗 憾 的 是 ， 矢 量 图 不 易 制 作 色 调 复杂 图 像 的 因素 ， 这 一 局 限 迫 使 设计 
者 一 般 只 愿意 将 logo、UI 图 标 、 标 识 符号 等 简单 图 像 存 为 矢量 图 。 

矢量 图 的 后 缀 一 般 有 .ai、.cdf、. 印 、.swf 等 。.ai 后 级 的 文件 是 一 种 静 帧 的 矢量 文件 格式 ，.cdf 后 绥 
的 文件 多 以 工程 图 为 常见 。 而 .swf 格式 文件 其 实 指 的 就 是 Flash，Flash 也 是 页 面 中 最 常见 的 一 种 动画 ， 
将 在 后 面 的 章节 中 介绍 。 


4.1.4 图 像 的 分 辨 率 


分 辩 率 的 单位 是 dpi (display pixels/inch) ， 即 每 英寸 显示 的 线 数 。 通 常人 们 所 指 的 分 辨 率 有 两 种 ， 
分 为 屏幕 分 辨 率 和 图 片 分 辩 率 ， 屏 幕 分 辨 率 即 指 计算 机 显示 器 默认 的 分 辩 率 。 

一 般 来 说 ， 目 前 大 部 分 显示 器 的 分 辩 率 是 1024X768。 即 是 说 ， 如 果 设 计 者 制作 的 页 面 范围 超过 了 
显示 器 默认 的 分 辩 率 ， 那 么 即使 是 在 浏览 器 全 屏 的 情况 下 ， 页 面 也 不 能 完全 在 浏览 器 中 展示 出 来 ， 记 
以 这 种 情况 下 ， 浏 览 器 中 就 出 现 了 滚动 滑 条 。 

图 像 的 分 辨 率 是 用 于 量度 位 图 图 像 内 数据 量 多 少 的 一 个 参数 。 分 辨 率 越 高 的 图 像 ， 包 含 的 数据 越 
多 ， 图 像 的 容量 也 大 ， 需 要 消耗 更 多 的 计算 机 资源 ， 需 要 更 大 的 存储 空间 。 所 以 ， 对 于 页 面 开 发 者 ， 
选择 适当 的 图 片 才 是 最 好 的 选择 。 


让 人 注意 : 并 不 是 说 图 像 分 辩 率 越 高 的 图 像 就 一 定 越 清 晰 ， 这 其 中 还 要 看 图 像 本 身 制 作 的 水 准 。 


那么 ， 像 素 和 分 辨 率 又 有 什么 关系 呢 ? 分 辩 率 指 的 是 每 英寸 的 像素 值 ， 通 过 像素 和 分 辨 率 的 换算 
可 以 测算 长 度 。 举 例 来 说 ， 一 幅 400X 300 分 辩 率 的 图 像 ， 在 一 个 屏幕 分 辩 率 为 300dpi 的 浏览 器 中 ， 
最 终 图 像 的 长 和 宽 是 通过 分 辨 率 和 像素 的 换算 得 出 的 。 

1 英寸 =2.54 厘米 。 

400/300X2.54=3.39 厘米 。 

300/300X2.54=2.54 厘米 。 

那么 最 终 显 示 的 是 一 个 长 约 3.39 厘米 、 宽 2.54 厘米 的 图 片 ， 所 以 ， 当 遇 到 不 同 屏幕 分 辨 率 的 显示 
器 时 ， 换 算 成 厘米 的 数值 也 是 不 同 的 。 


4.1.5 认识 一 些 网 页 中 常用 的 banner 尺寸 


在 网 页 中 ， 经 常 涉及 使 用 banner，banner 即 是 指 网 幅 广 告 、 旗 帜 广告 、 横 幅 广告 等 。 一 个 优秀 的 
页 面 ， 不 仅 是 放 入 的 banner 要 美观 精致 ， 同 时 更 要 符合 页 面 的 风格 ，banner 有 一 定 的 格式 标准 可 供 参 
考 ， 但 不 是 说 一 定 要 完全 严格 遵循 。 几 种 国际 尺寸 的 banner 如 下 。 

口 468X60: 全 尺寸 banner， 应 用 最 为 广泛 的 广告 条 尺寸 ， 用 于 页 眉 或 页 脚 。 

口 392X72: 全 尺寸 带 导航 条 banner， 主 要 用 于 有 较 多 图 片 展示 的 广告 条 ， 用 于 页 眉 或 页 脚 。 
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234X60: 半 尺 寸 banner， 这 种 规格 适用 于 框架 或 左右 形式 主页 的 广告 链接 。 
125X 125: 方形 按钮 ， 这 种 规格 适 于 表现 照片 效果 的 图 像 广告 。 

120X 90: 按钮 类 型 ， 主 要 应 用 于 产品 演示 或 大 型 logo。 

120X 60: 按钮 类 型 ， 这 种 广告 规格 主要 用 于 做 logo 使 用 。 

88X31: 小 按钮 ， 主 要 用 于 网 页 链接 ， 或 网 站 小 型 logo。 

120X240: 垂直 banner。 
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说 明 : 读者 可 以 依照 这 些 参考 数据 ， 裁 定 自己 放 入 页 面 中 的 banner 大 小 。 


4.2 用 图 像 来 编织 美丽 的 页 面 


图 像 是 增加 网 页 可 视 效 果 的 最 有 力 武器 之 一 ， 在 语言 文字 无 法 描述 的 地 方 ， 一 些 只 可 意 会 无 法 言 
传 的 表达 中 ， 也 许 设计 者 使 用 一 张 图 片 就 可 以 完美 传达 设计 者 的 信息 。 本 节 将 介绍 如 何在 页 面 中 放 入 
图 像 、 编 辑 图像 。 

4.2.1 理解 图 像 路 径 

在 页 面 中 放 入 图 像 ， 实 际 上 是 使 用 了 服务 器 中 的 一 张 图 片 。 设 计 者 把 所 有 的 图 片 放 在 一 台 服 务 器 
的 某 个 文件 夹 中 ， 然 后 通过 HTML 语言 告诉 浏览 器 这 些 图 片 放 在 哪里 ， 即 图 片 的 路 径 ， 这 就 好 比 是 图 
片 住 在 计算 机 中 的 门牌 号 码 。 当 用 户 浏览 页 面 时 ， 浏 览 嚣 会 解析 这 张 图 片 ， 通 过 获知 的 “门牌 号 码 ” 
找到 这 张 图 片 。 在 页 面 文档 中 ， 使 用 <img/> 标 签 将 图 像 放 入 页 面 中 ， 使 用 的 格式 如 下 : 

<img src=... alt=... /> 

img 表示 image，src 表示 source， 即 图 片 的 源 。 标 签 中 ，src 属性 用 来 指定 图 像 的 位 置 ，alt 属性 指 
定 关 于 图 像 的 描述 性 文本 。 如 果 浏 览 者 不 能 看 到 图 像 ， 将 看 到 alt 属性 注释 的 文本 。 如 程序 4.1 在 页 面 
中 的 这 幅 图 像 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 4 章 \4-1 ”在 页 面 中 添加 图 像 .html】 

【实例 4-1】 在 页 面 中 添加 图 像 的 方法 ， 其 源码 展示 如 下 : 


程序 4.1 在 页 面 中 添加 图 像 .html 


01 <html> 

02 <head> 

03 <title> 在 页 面 中 添加 图 像 </title> 

04 </head> 

05 <body style="text-align:center"> // 令 文本 居中 显示 
06 <h3> 向 左 走 向 右 走 

07 </h3> 

08 <p><img src=" 图 片 /向 左 向 右 .jpg" alt=" 向 左 走向 右 走 "/> 
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<lbody> 
</html> 


注意 : <img/> 标 签 中 的 斜 杠 如 果 省 略 也 可 以 , 但 是 XHTML 标准 要 求 任何 空 标签 , 即 没有 结 
束 标签 的 标签 ， 都 要 在 结尾 包含 一 个 斜 杠 。 


a 属性 下 的 文本 注释 


图 4.4 在 页 面 中 添加 图 像 


【深入 学 习 】 如 代码 中 第 8 行 ，src 属性 下 指向 “图 片 ”文件 夹 中 的 “向 左 向 右 ”这 张 JPEG 图 片 。 
alt 属性 下 是 对 这 张 图 片 的 注释 ， 如 果 浏 览 者 未 能 看 到 图 片 ， 将 能 看 到 设计 者 对 图 片 的 注释 。 


4.2.2 


像 编 辑 文本 对 齐 一 样 在 页 面 中 对 齐 图 片 


如 果 在 一 个 页 面 中 放 入 图 片 ， 可 以 像 编辑 文本 一 样 令 图 片 左 对 齐 、 右 对 齐 或 居中 对 齐 ， 只 要 在 
<img/> 标 签 中 加 入 align 属性 即 可 ， 如 程序 4.2 的 使 用 案例 。 
【本 节 示 例 参考 : 资料 光盘 \ 第 4 章 \4-2 ”在 页 面 中 对 齐 图 片 .html】 


【实例 4-2】 在 页 面 中 对 齐 图 片 的 方法 ， 其 源码 展示 如 下 : 


程序 4.2 在 页 面 中 对 齐 图 片 .html 


<html> 
<head> 
<title> 在 页 面 中 对 齐 图 片 </title> 
</head> 
<body> 
<h4>"The Shot"</h4> // 这 里 是 文本 的 标题 
<br> 
1989 年 季 后 赛 首 轮 第 五 场 ，Michael 在 最 后 3 秒 接 球 、 运 球 、 起 跳 … 
<p align="center"><img src=" 图 片 /表情 2.jpg" /> /使 图 像 居 中 对 齐 
</p> 
<p ><img src= "图 片 /表情 1.jpg" align="left" /> /使 图 像 居 左 对 齐 
<img src=" 图 片 /表情 3jpg" align="right"/> ”// 使 图 像 居 右 对 齐 
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【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 4.5 所 示 。 


图 4.5 页 面 中 图 片 的 对 齐 属性 使 用 
【深入 学 习 】 如 本 例 中 第 11、12 行 ， 图 像 的 对 齐 和 文本 的 对 齐 在 使 用 代码 上 略 有 不 同 ， 当 对 图 像 
命令 左 对 齐 和 右 对 齐 时 ，align 属性 可 以 放 在 <img/> 标 签 内 ， 也 可 以 放 在 <p> 标 签 或 其 他 标签 内 ， 而 居中 
对 齐 的 命令 放 在 <img/> 标 签 内 不 起 作用 ， 图 片 依然 是 左 对 齐 。 正 如 图 4.5 在 浏览 器 中 的 显示 效果 那样 。 
同时 ， 第 11、12 行 中 的 属性 命令 实际 上 还 针对 和 图 像 并 列 的 文本 内 容 ， 可 以 理解 为 ， 使 图 像 放 在 
文本 的 左边 ， 或 者 是 使 图 像 放 在 文本 的 右边 。 所 以 ， 从 这 个 角度 就 可 以 理解 ， 为 什么 属性 中 没有 居中 
对 齐 的 使 用 命令 。HTML 语言 活用 的 方法 有 很 多 ， 这 些 经 验 需 要 慢 慢 积累 。 


注意 : 目前 ， 在 设计 页 面 版 块 时 ， 通 常 在 放置 图 片 前 会 先 设计 好 表格 、 框 架 或 使 用 层 ， 这 


些 在 后 面 的 章节 中 会 继续 介绍 ， 而 这 种 放置 图 片 的 方法 是 学 习 HTML 语言 的 基础 ， 并 不 实用 。 


4.2.3 图 像 与 文本 的 对 齐 方式 


在 编辑 图 像 时 ， 图 像 不 同 于 文本 ， 图 像 都 是 一 个 个 分 开 的 整体 。 而 编辑 图 像 时 ， 如 果 设 计 者 想 在 
图 片 的 旁边 放 入 文本 内 容 , 就 需要 考虑 如 何 处 理 文本 和 图 像 对 齐 方式 。 在 HTML 文档 中 分 为 如 下 4 种 。 
口 ”使 图 像 的 顶部 和 同一 行 的 文本 对 齐 ， 使 用 代码 如 下 : 


<img style="vertical-align:text-top"/> 

口 ”使 图 像 的 中 部 和 同一 行 的 文本 对 齐 ， 使 用 代码 如 下 : 
<img style="vertical-align:middle"/> 

口 ”使 图 像 的 底部 和 同一 行 的 文本 对 齐 ， 使 用 代码 如 下 : 
<img style="vertical-align:text-bottom"/> 

口 ”使 图 像 的 底部 和 文本 的 基线 对 齐 ， 使 用 代码 如 下 : 
<img style="vertical-alignbaseline"/> 
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程序 4.3 中 ， 分 别 使 用 了 text-top、middle 和 baseline 这 3 种 对 齐 样式 。 
【本 节 示 例 参考 : 资料 光盘 \ 第 4 章 \4-3 ”图 像 与 文本 的 对 齐 方式 .html】 
【实例 4-3】 图 像 与 文本 的 对 齐 方式 ， 其 源码 展示 如 下 : 

程序 4.3 ”图像 与 文本 的 对 齐 方式 .html 


01 <html> 

02 <head> 

03 <title> 图 像 与 文本 的 对 齐 <ltitie> 

04 </head> 

05 <body> 

06 <h4> 图 像 与 文本 的 对 齐 方式 </h4 

07 <p><img src=" 图 片 /图 鉴 1.jpg" 灵 掌 握 着 许多 威力 
08 十 足 的 魔法 ， 包 括 操纵 死去 的 战士 作战 的 恐怖 魔法 。 

09 <! 一 文本 和 图 像 顶 部 对 齐 一 > 


10 ”<p><img src=" 图 片 /图 鉴 2jpg" style="vertical-align:middle"/> 兽 人 类 似 人 族 ， 但 拥有 巨大 的 
11 ”力量 和 颇 高 的 生命 值 。 

12 <! 一 文本 和 图 像 中 间 对 齐 一 > 

13 ”<p><img src=" 图 片 /图 鉴 3.jpg” style="vertical-align:baseline"/> 巨 魔 猎手 用 嗅觉 灵敏 能 力 
14 追踪 宿敌 ， 它 们 更 倾向 于 在 黑暗 中 猎 杀 对 手 。 


15 <!-_ 文 本 和 图 像 底部 对 齐 -> 
16 </body> 
17 </html> 
【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 4.6 所 示 。 
i me 


图 从 与 文本 的 对 到 方式 


国 灵 章 强攻 许多 威力 十 是 的 风 疆 ， 全 拓 盈 区 捷 去 的 战士 作 战 的 汉 候 区 对 
国 …… 但 拉 有 巨 二 的 力量 各 林 训 的 生 会 信 
国 峰 太 千 用 给 党 呈 址 能力 省 天生 笋 , 它们 更 候 隐 于 相生 史 中 全 外 对手 


图 4.6 图 像 与 文本 的 对 齐 方 式 


说 明 : baseline 属性 的 效果 和 text-bottom 属性 几乎 相同 , 后 者 文本 不 会 超出 图 片 的 下 边线 ， 


可 参考 图 中 text-top 属性 的 样式 ， 文 本 最 上 线 没有 超过 图 像 上 线 。 


4.2.4 ”控制 图 像 与 文本 的 距离 


编辑 页 面 时 ， 除 了 可 以 控制 图 像 与 文本 的 编排 方式 外 ， 甚 至 可 以 进一步 调整 图 像 和 文本 的 距离 。 
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当 设 置 好 图 片 和 文本 的 距离 后 , 可 利用 hspace 和 vspace 属性 来 分 别 控制 图 像 四 周 与 其 他 内 容 间 隔 的 水 
平方 向 的 宽度 ， 或 者 是 垂直 方向 的 高 度 ， 这 种 效果 可 以 令 页 面 展示 出 更 多 不 一 样 的 特色 。 具 体 案例 的 
使 用 如 程序 4.4 所 示 。 


【本 节 示 例 参考 : 资料 光盘 \ 第 4 章 M4-4 ”控制 图 像 与 文本 的 距离 .html】 
【实例 4-4】 控 制图 像 与 文本 的 距离 的 方法 ， 其 源码 展示 如 下 : 
程序 4.4 ”控制 图 像 与 文本 的 距离 .html 


01 <html> 

02 <head> 

03 <title> 图 像 与 文本 的 距离 控制 </title> 

04 </head> 

05 <body> 

06 <h4> 图 像 与 文本 的 距离 控制 </h4> 

07 <img src=" 图 片 /黑白 照片 jpg" hspace=30 > 这 段 文字 距离 左边 图 像 的 距离 是 30px。 
08 <p><img src=" 图 片 /黑白 照片 jpg" vspace=30 ><br> 这 段 文字 距离 上 边 图 像 的 距离 是 
09 30px。 

10 </body> 

11 </html> 


【运行 程序 】 从 图 4.7 中 可 以 看 出 这 一 效果 。 


CE | 


图 4.7 控制 图 像 与 文本 的 距离 


注意 : 左右 两 边 的 距离 都 是 30px， 而 下 一 幅 图 中 ， 上 下 两 边 的 距离 都 是 30px。 


【深入 学 习 ]】 在 设置 距离 数值 时 ,使 用 的 标准 单位 是 像素 ， 英 文 表示 缩写 即 px。hspace=30 是 指控 
制图 像 左右 两 边 与 页 面 其 他 内 容 间 隔 30px 的 距离 。 同 样 ，vspace=30 是 指 图 像 上 下 两 边 与 页 面 其 他 内 
容 的 间隔 距离 是 30px。 
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4.3 让 图 像 变 得 更 美观 


如 果 使 用 Google 或 Baidu， 设 计 者 可 以 找到 任何 自己 需要 的 图 像 ， 可 是 这 些 图 像 又 不 可 能 完全 符 
合 设计 者 的 想法 ， 每 个 设计 者 总 要 面 对 改 变 图 像 的 大 小 、 截 选 图 片 的 部 分 区 域 等 问题 ， 在 本 节 中 ， 将 
结合 Windows 自 带 的 画图 工具 ， 介 绍 一 些 基本 的 修改 图 像 的 方法 。 


4.3.1 使 用 画图 工具 修改 图 像 


在 HTML 文档 中 有 一 种 可 以 编辑 图 像 的 大 小 的 方式 ， 在 <img/> 标 签 中 添加 “ 宽 ” 和 “高 ”的 属性 ， 
如 程序 4.4 中 第 7 行 如 果 改 成 : 

<img src=" 图 片 /黑白 照片 jpg" width="300" height="100"> 

显示 的 结果 如 图 4.8 所 示 。 原 始 图 像 将 整体 被 压缩 变形 。 虽 然 使 用 代码 改变 了 图 像 的 大 小 ,得 到 了 
需要 规则 的 宽 和 高 。 但 是 ,这 种 方法 也 使 图 像 草 到 严重 的 变形 ， 如 图 4.8 中 最 上 面 的 图 。 所 以 很 少 有 人 
愿意 在 页 面 文档 中 直接 编辑 ， 通 过 外 部 软件 来 修改 图 像 比较 方便 ， 这 样 的 软件 很 多 ， 最 常见 的 如 
Photoshop、Firework 等 。 这 里 对 于 基础 的 修改 图 像 , 只 需要 用 Windows 自 带 的 画图 软件 就 可 以 做 到 了 。 
如 图 4.9 所 示 为 电影 《Love Actually》 的 一 张 海 报 。 


原始 图 a 
图 4.8 失真 对 比 4.9 Love Actually 


很 显然 ， 这 么 一 幅 大 海报 是 不 适合 使 用 的 ， 现 在 希望 将 海报 中 间 的 “love actually” 取 出 来 作为 页 
面 的 某 个 图 标 。 那 么 首先 单 击 桌面 上 的 “开始 ”按钮 ， 在 弹出 的 菜单 中 选择 “附件 ”一 “画图 ”命令 ， 
打开 “画图 ”工具 。 在 其 中 打开 这 张 图 ， 如 图 4.10 所 示 。 


图 4.10 如何 截取 图 片 
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使 用 左边 工具 栏 第 一 排 的 右边 工具 ， 即 截 选 图 片 工具 ， 选 出 需要 的 部 分 ， 如 图 中 右边 放大 的 样式 。 
这 部 分 图 中 ， 如 果 不 想 保留 图 中 的 “are in” 字 样 ， 可 选择 工具 栏 第 二 排 左 边 的 “橡皮 擦 ”工具 ， 可 以 
擦 去 “are in” 字 样 ， 然 后 重新 选取 需要 的 部 分 图 片 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “ 剪 切 ”命令 。 

之 后 ， 在 项 栏 的 “文件 ”菜单 下 选择 “新 建 ”命令 ， 创 建新 的 图 像 。 在 新 的 图 像 中 ， 保 持 左 侧 工 
具 栏 在 “ 截 选 图 片 ”工具 选择 下 ， 在 弹出 的 快捷 菜单 中 选择 “粘贴 ”命令 ， 最 后 通过 拖 搜 图 像 的 边缘 
修改 图 像 的 大 小 。 完 成 以 后 ， 在 “文件 ”菜单 下 选择 “保存 ”命令 或 “另存 为 ”命令 即 可 ， 如 图 4.11 
所 示 。 


图 4.11 修改 完成 的 图 像 


画图 工具 的 功能 不 多 ， 只 能 做 一 些 最 简单 、 最 基本 的 修改 图 片 的 功能 ， 市 面 上 修改 图 像 的 软件 数 
不 胜 数 ， 最 赋 盛 名 的 可 能 就 是 Photoshop 了 ， 本 书 会 在 动感 页 面 篇 中 讲 到 Photoshop 的 使 用 。 


三 才 - 说 明 : Windows 自 带 的 画图 工具 功能 有 限 ， 如 果 希 望 制作 更 多 效果 的 图 像 ，Photoshop 是 


一 个 很 好 的 选择 。 


4.3.2 不 一 样 的 改变 一 一 给 图 像 添加 边框 

编辑 图 像 时 ， 有 一 种 使 用 频 度 很 高 的 修饰 图 片 的 方式 。 给 图 像 添 加 边框 ， 虽 然 这 是 对 图 片 小 小 的 
修饰 ， 但 带 来 的 效果 是 相当 突出 的 。 在 <img/> 标 签 中 添加 border 属性 ， 它 的 写法 如 下 : 

<img src="... "border= > 

其 中 ， 在 border 属性 下 输入 像素 值 ， 指 边框 的 宽度 。 在 程序 4.5 中 ， 用 这 个 方法 给 先前 的 截图 添 
加 了 边框 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 4 章 \4-5 ”给 图 像 添加 边框 .html】 

【实例 4-5】 给 图 像 添加 边框 的 方法 ， 其 源码 展示 如 下 : 


程序 4.5 ”给 图 像 添加 边框 .html 


01 <html> 
02 <head> 
03 <title> 给 图 像 添加 边框 </title> 
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04 </head> 
05 <body> 
06 <h4> 添 加 图 像 边 框 </h4> 
07 <p align=center> 
08 <img src=" 图 片 /la 图 标 .bmp" border=8 > // 给 图像 添加 边框 
09 </p> 
10 </body> 
11 </html> 
【运行 程序 】 在 页 面 中 显示 的 效果 如 图 4.12 所 示 。 
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图 4.12 添加 图 像 边 框 


【深入 学 习 】 这 是 前 面 小 节 中 ， 从 电影 海报 中 截取 出 来 的 图 像 。 这 幅 图 像 添加 了 边框 之 后 ， 立 刻 
在 页 面 中 显得 更 突出 ， 更 容易 抓 住 人 的 眼球 ， 使 图 像 也 有 了 一 种 个 性 化 的 标示 。 如 果 读 者 掌握 了 CSS 
的 规则 ， 甚 至 可 以 改变 图 像 边框 的 颜色 ,修改 图 像 的 边 角 。 而 这 些 ， 本 书 将 在 后 面 的 篇 章 中 具体 介绍 。 


Tt 注意 : 这 里 修饰 的 做 法 并 没有 将 结构 和 表现 分 离 。 当 了 解 了 CSS 样式 表 之 后 ， 可 以 使 用 一 


种 更 好 的 方法 。 


4.3.3 独树一帜 的 水 平 线 

在 设计 页 面 时 ， 经 常 需 要 在 网 页 中 插入 一 条 水 平 线 来 隔 开 文 本 ， 或 者 是 为 了 起 到 美化 页 面 的 作用 ， 
水 平 线 是 设计 页 面 中 的 一 个 特殊 的 小 部 分 ， 使 用 页 面 标签 可 以 实现 这 个 功能 ， 代 码 的 写法 如 下 

<hr align="..." width="..." size="..."> 

<hr> 标 签 即 是 放 入 水 平 线 的 意思 。 在 编辑 水 平 线 时 ， 可 以 使 用 align 属性 编辑 其 对 齐 模式 。width 


属性 和 size 属性 下 填 入 具体 的 数字 ， 单 位 是 像素 。width 属性 即 表 示 水 平 线 的 长 度 ， 而 size 属性 用 来 表 
示 水 平 线 的 宽度 。 
EE 


说 明 : 在 本 章 4.5 节 中 的 案例 将 使 用 到 水 平 线 。 


。62 。 


第 4 章 “将 因 像 放 入 贡 关 中 


4.4 改变 页 面 的 背景 


放 入 背景 图 片 的 方式 和 插入 图 片 的 方式 是 不 同 的 ， 添 加 图 可 以 放 入 在 页 面 中 任意 位 置 ， 但 不 能 
插图 上 编辑 页 面 内 容 ， 而 背景 图 像 就 是 整个 页 面 的 最 底层 ， 原 先是 一 片 空白 的 页 面 改 成 了 一 张 图 片 而 
已 ， 设 计 者 可 以 在 背景 图 像 上 放 入 任何 页 面 内 容 ， 使 用 的 页 面 代码 如 下 : 


<body background= 
background-repeat: ..."> 


在 页 面 主体 开始 的 <body> 标 签 中 使 用 样式 background-image 属性 ， 即 背景 图 像 属性 ， 用 来 指定 背 
景 的 图 片 ， 使 用 时 在 url 后 面 放 入 指定 的 图 片 地 址 。background-repeat 属性 用 来 定义 背景 图 像 在 水 平方 
向 或 牌 直方 向 上 重复 使 用 ， 以 免 因 为 图 像 太 小 而 不 能 铺 满 整个 页 面 ， 水 平方 向 重复 即 添加 repeat-x， 垂 
直方 向 重复 即 添加 repeat-y。 这 种 方法 好 比 在 地 板 上 铺 瓷 砖 , 每 一 幅 背 景 图 看 作 是 一 块 瓷砖 ， 而 需要 重 
复 使 用 很 多 这 样 的 瓷砖 来 铺 满 地 板 。 程 序 4.6 中 演示 了 这 一 方法 的 使 用 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 4 章 \4-6 设置 页 面 背 景 图 像 .html】 

【实例 4-6】 设 置 页 面 背景 图 像 的 方法 ， 其 源码 展示 如 下 : 


程序 4.6 设置 页 面 背景 图 像 .html 


01 <html> 

02 <head> 

03 <title> 设置 页 面 背景 图 像 </title> 

04 </head> 

05 | 
06 background-repeat:no-repeat"> 

07 <br><h3><p style="color:#f0000"> 添 加 页 面 背景 
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【深入 学 习 】 代 码 第 5 行 引用 了 一 张 命名 为 “页 面 背景 ”的 图 片 ， 注 意 这 一 行 最 后 的 分 号 “;”， 
包括 HTML 中 所 有 的 标点 符号 ， 一 定 要 在 英文 输入 法 下 输入 。 


说 明 : 代码 第 7 行 中 ，<p> 标 签 中 的 style 属性 中 “color:#f0000” 修 改 文本 的 颜色 ,这 种 
用 法 会 在 后 面 的 章节 中 介绍 。 


4.5 人 案例: 把 宠物 的 照片 放 到 网 页 上 去 


本 章 涉及 了 很 多 编辑 图 像 的 技法 ， 本 节 通 过 运用 这 些 技法 将 这 些 技能 运用 到 实际 操作 中 去 。 很 多 
人 现在 有 自己 的 宠物 ， 有 些 人 会 把 自己 宠物 的 照片 晒 到 互联 网 上 ， 给 自己 的 宠物 找 玩 伴 ， 藉 此 来 认识 
同样 喜爱 宠物 的 朋友 。 在 这 个 例子 中 ， 将 学 习 如 何 把 自己 宠物 的 照片 晒 到 互联 网 上 。 

首先 ， 需 要 对 这 个 宠物 页 面 给 出 一 个 设计 方案 ， 明 确 基 本 的 构思 。 如 在 这 个 例子 中 ， 需 要 3 个 设 
计 要 点 。 

口 “一 个 页 面 的 banner。 

口 “ 宠 物 的 图 像 要 放 在 页 面 的 右 人 出， 应 该 给 图 像 加 上 边框 。 

口 “定义 页 面 的 文本 内 容 ， 放 在 页 面 的 左 侧 。 

当 设 计 者 规划 好 这 3 部 分 之 后 ， 就 逐一 放 到 代码 文档 中 去 ， 如 程序 4.7 所 示 。 

【本 节 示 例 参考 ; 资料 光盘 \ 第 4 章 4-7 我 的 宠物 页 面 .html】 

【实例 4-7】 制 作 “ 我 的 宠物 ”页 面 ， 其 源码 展示 如 下 : 


程序 4.7 ”我 的 宠物 页 面 .html 


01 <!IDOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" 

02 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

03 <html xmlns="http://www.w3.org/1999/xhtml"> 

04 <head> 

05 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
06 <title> 我 的 宠物 </title> 

07 </head> 

08 

09 <body> 

10 <p><img src=" 图 片 /我 的 宠物 banner.gif" width="1017" height="24" /></p> 
11 <! 一 这 里 放 入 banner， 长 度 是 1017px 高 度 是 24px 一 > 

12 <p> 

13 <p> 

14 <p><h2>Jenny</h2> 

15 <p><img src=" 图 片 /我 的 宠物 .gif' width="192" height="262" border="2" align="right" 
16 /></p> // 效 入 图 像 

二 <p> 年 龄 : 24<br/> 
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18 最 喜爱 的 食物 : 小 虾 、 肉 <br/> 


19 特点 : 很 安静 </p> 

20 <p><hr align="left" width="400" size="3" > /| 放 入 水 平 线 

21 <p>&nbsp; 更 新 宠物 日 记 </p> 

22 <hr align="left" width="400" size="3" > 1/ 放 入 水 平 线 

23 <p>2008 年 9 月 1 号 </p> 

24 <p>&nbsp; 外 面 的 天 气 还 是 很 热 ， 所 以 Jenny 一 直 都 懒 懒 的 趴 在 那里 ， 好 久 也 .… 
25 </body> 

26 </html> 


【运行 程序 】 这 个 案例 最 后 在 浏览 器 中 的 显示 效果 如 图 4.14 所 示 。 


图 4.14 我 的 宠物 


【深入 学 习 】 页 面 主体 中 ， 即 <body> 标 签 内 ， 其 中 第 10 行 代码 表示 放 入 页 面 的 banner。 第 15 行 
表示 放 入 页 面 中 宠物 的 照片 ， 使 其 居 右 ， 这 样 ， 页 面 中 的 文本 就 在 图 像 的 左 侧 排列 。 而 第 20 行 和 第 22 
行 表示 水 平 线 ， 水 平 线 的 长 度 为 400px， 宽 度 为 3px， 令 其 左 对 齐 。 


4.6 小 结 


本 章 主要 介绍 了 关于 页 面 中 图 像 的 知识 。 重 要 的 知识 点 有 : 
图 像 分 为 位 图 和 矢量 图 ， 设 计 者 经 常 将 JPEG、PNG 和 GIF 图 像 放 在 页 面 中 。 
图 像 的 分 辩 率 和 像素 。 
学 习 了 图 像 和 图 像 之 间 排 版 的 方法 以 及 图 像 和 文本 之 间 排 版 的 方法 。 
学 习 了 使 用 Windows 自 带 的 画图 工具 来 截取 修饰 图 像 的 方法 。 
HTML 中 使 用 代码 给 图 像 添 加 边框 和 在 页 面 中 放 入 水 平 线 。 
设置 页 面 背景 并 有 效 地 控制 页 面 背景 。 
最 后 ， 本 章 通 过 一 个 综合 的 实例 展示 了 这 些 知识 点 的 实际 应 用 效果 ， 这 样 的 页 面 显 然 比 纯 文 本 的 
页 面 美观 了 一 些 ， 但 是 还 不 够 。 优 秀 的 页 面 还 需要 更 精致 的 装扮 ， 如 果 页 面 背景 不 是 白色 的 ， 会 不 会 
更 美观 。 如 果 可 以 使 用 不 同 颜色 的 字体 ， 会 不 会 更 绚丽 。 带 着 这 样 的 疑问 ， 将 在 第 5 章 的 知识 中 学 习 
如 何 解决 这 些 问 题 。 


百 百 . 日 扎 : 日 ' 蝇 
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第 5 章 和 让 网 页 变 得 更 绚丽 一 些 


页 面 设 计 中 ， 难 道 所 有 的 字体 都 应 该 是 黑色 的 ， 所 有 的 背景 都 应 该 是 白色 的 ， 所 有 的 图 片 都 应 该 
是 方 方 正 正 的 吗 ? 当然 不 是 。 虽 然 代码 语言 规则 是 固定 的 ， 标 签 是 永远 不 会 改变 的 ， 但 是 在 语言 代码 
的 基础 上 ， 设 计 者 却 可 以 花 尽心 思 ， 开 发 出 许多 令 人 赞叹 的 、 具 备 特殊 视觉 效果 的 页 面 。 本 章 的 知识 
点 如 下 。 


口 。 计 算 机 的 颜色 原理 。 
口 “如何 使 用 颜色 去 修饰 页 面 。 
口 了 解 图 像 的 通道 。 
口 “图像 的 简单 应 用 。 
5.1 了 解 计算 机 语言 下 的 颜色 描述 
在 计算 机 的 世界 里 ， 每 种 颜色 都 有 自己 的 一 串 数字 ， 如 白色 是 本 FFFFF、 黑 色 是 #000000、 红 色 是 


#FF0000、 巧 克 力 色 是 #D2691E 等 ， 这 串 数字 就 是 表示 颜色 的 颜色 值 。 在 理解 颜色 值 前 ， 首 先 要 明白 计 
算 机 的 颜色 模式 。 

人 类 的 眼睛 看 到 的 颜色 有 两 种 ， 一 种 是 发 光 体 发 出 的 颜色 ， 如 电视 机 荧屏 ; 另 一 种 是 物体 本 身 不 
发 光 ， 而 是 反射 光线 产生 的 颜色 。 这 就 很 常见 了 ， 生 活 中 的 大 部 分 物质 都 是 不 发 光 的 ， 如 书本 。 而 对 
于 发 光 体 的 颜色 模式 ， 典 型 的 应 用 便 是 计算 机 屏幕 。 计 算 机 屏幕 上 的 每 一 个 点 都 有 红 、 黄 、 蓝 三 色 的 
荧光 粉 ， 在 电子 枪 的 照射 下 ， 发 出 不 同比 率 的 三 原色 光 ， 相 加 混合 形成 用 户 所 看 到 的 图 像 。 

这 3 种 基本 的 颜色 ， 称 之 为 “三 原色 ”， 发 光 体 的 颜色 模式 ， 又 称 之 为 “加 色 模 式 ”， 两 者 相 统 
一 ， 便 是 RGB 色彩 模型 。 而 网 页 的 颜色 模式 ， 就 是 这 种 RGB 模式 来 确定 的 。R、G、B 3 个 颜色 通道 
都 使 用 8 位 存储 器 ， 这 样 每 个 颜色 可 以 有 2 的 8 次 方 ， 也 就 是 256 个 层次 。 所 以 很 多 软件 中 单个 颜色 
通道 都 是 用 0 一 255 的 整数 范围 ， 共 256 个 数 来 表示 的 ，3 个 颜色 通道 加 在 一 起 ， 这 个 色彩 模型 一 共 能 
表现 1670 万 种 颜色 。 按 照 这 样 的 规律 ， 以 十 六 进 制 来 表示 ，255 相对 于 十 六 进 制 下 的 FF， 然 后 把 3 个 
颜色 值 依次 并 列表 示 出 来 ， 并 以 # 开 头 ， 如 图 5.1 所 示 是 一 个 经 常 适用 于 图 形 软件 中 的 色 板 。 

图 中 R=255、G=255、B=255， 即 三 色 颜 色 值 都 为 最 大 时 ， 按 照 三 原色 理论 ， 红 色 、 绿 色 和 蓝 色 加 
在 一 起 时 ， 得 到 的 结果 自然 是 白色 了 。 同 时 ， 按 照 规律 ，3 个 数字 依次 都 是 最 大 值 ， 全 部 记 作 FF， 串 
在 一 起 就 是 #FFFFFF。 如 果 3 个 值 都 为 最 小 值 ， 颜 色 为 #000000， 既 然 是 最 小 值 ， 意 味 着 没有 任何 颜色 ， 
这 时 ， 表 现 出 来 的 当然 就 是 黑色 了 。 事 实 上 ， 对 于 设计 者 来 说 ， 由 于 大 部 分 软件 都 可 以 直观 地 选择 颜 
色 ， 所 以 并 不 需要 刻意 去 背 熟 不 同色 彩 的 颜色 值 。 


说 明 : 颜色 值 的 表示 中 ， 不 区 分 大 小 写 ， 所 以 #FFFFFF 和 #ffffff 是 一 样 的 ， 都 表示 为 白色 。 
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5.2 让 页 面 绚 丽 多 彩 


从 第 4 章 中 了 解 到 可 以 使 用 图 像 作为 页 面 背景 来 装饰 网 页 ， 使 之 美观 。 但 如 果 只 需要 改变 页 面 背 
景 颜 色 ， 那 是 不 是 需要 放 入 整整 一 大 张 单 色 的 背景 图 片 呢 ? 当然 是 不 需要 的 。HITML 标签 提供 了 可 以 
直接 修改 页 面 背景 色 的 方法 ， 甚 至 设计 者 可 以 使 用 标签 修改 文本 字体 的 颜色 ， 让 页 面 更 丰富 。 


5:2.1 


改变 页 面 背景 颜色 


HTML 标签 的 使 用 不 难 ， 类 似 于 很 多 次 已 经 学 习 到 的 样式 ， 如 背景 图 像 ， 依 然 是 在 <body> 标 签 中 
添加 style 属性 。 

<body style="background-color:..." > 

在 这 名 代码 中 ， 属 性 可 以 用 颜色 值 表 示 ， 而 且 还 支持 使 用 标准 的 Windows 颜色 名 词 ， 有 Black、 
White、Red、Green、Blue、Yellow、Magenta、Cyan、Purple、GCray、Lime、Maroon、Navy、Olive、 
Silver、Teal。 当 然 ， 对 于 了 解 如 何 调 色 的 设计 者 来 说 ， 完 全 可 以 使 用 颜色 值 去 尝试 自己 定义 颜色 ， 如 
#FF0000 是 红色 。 如 果 设计 者 希望 得 到 一 种 紫红 色 ， 那 么 便 要 在 红色 里 面 加 上 蓝 色 ， 所 以 数值 表示 就 
成 了 #FF00FF。 如 果 希 望 用 更 直接 的 方法 ， 可 以 直接 在 属性 中 输入 颜色 名 词 ， 程 序 5.1 展示 了 颜色 名 词 
所 对 应 的 页 面 背 景 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 5 章 \,5-1 改变 页 面 背景 颜色 .html】 


【实例 5-1】 改 变 页 面 背景 颜色 的 方法 ， 其 源码 展示 如 下 : 


程序 5.1 改变 页 面 背景 颜色 .html 


<html> 
<head> 
<title> 设置 背景 颜色 </title> 
</head> 
<body style="background-colorteal"> // 设 置 页 面 背景 的 颜色 
<h5> 
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07 <br><br><br> 背 景 颜 色 的 设置 ， 这 是 墨绿 色 </h5> 
08 </body> 
09 -</html> 


【运行 程序 】 最 终 显 示 在 浏览 器 中 的 结果 如 图 5.2 所 示 。 


rE EC 


图 5.2 背景 颜色 的 设置 


5.2.2 ”改变 页 面 文本 字体 颜色 
修改 页 面 文本 的 颜色 ， 直 接 在 结构 性 标签 中 添加 颜色 属性 即 可 ， 代 码 如 下 : 
<body style="color:..."> 
或 者 也 可 以 写 为 : 
<p style="color:..."> 
程序 5.2 展示 了 不 同 颜色 名 词 下 的 文本 颜色 。 
【本 节 示 例 参考 : 资料 光盘 \ 第 5 章 \5-2 ”改变 文本 的 颜色 .html】 
【实例 5-2】 改 变 文 本 的 颜色 ， 其 源码 展示 如 下 : 
程序 5.2 改变 文本 的 颜色 .html 


01 <html> 

02 <head> 

03 <title> 文 本 颜色 </title> 
04 </head> 

05 <| 


06 ”<p style="color:red"> 这 是 使 用 Red 的 文本 

07 ”<p style="color:green"> 这 是 使 用 Green 的 文本 

08 ”<p style="color:blue"> 这 是 使 用 Blue 的 文本 

09 ”<p style="color:yellow"> 这 是 使 用 Yellow 的 文本 

10 ”<p style="color:magenta"> 这 是 使 用 Magenta 的 文本 
11 ”<p style="color:cyan"> 这 是 使 用 Cyan 的 文本 

12 ”<p style="color:purple"> 这 是 使 用 Purple 的 文本 

13 ”<p style="color:gray"> 这 是 使 用 Gray 的 文本 

14 ”<p style="colorlime"> 这 是 使 用 Lime 的 文本 

15 ”<p style="color:maroon"> 这 是 使 用 Maroon 的 文本 
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16 ”<p style="color:navy"> 这 是 使 用 Navy 的 文本 
17 ”<p style="color:olive"> 这 是 使 用 Olive 的 文本 
18 ”<p style="color:silver"> 这 是 使 用 Silver 的 文本 
19 ”<p style="color:teal"> 这 是 使 用 Teal 的 文本 
20 </body> 

21 </html> 


【运行 程序 】 在 浏览 器 中 的 显示 结果 如 图 5.3 所 示 。 
有 


ED 
图 5.3 文本 的 颜色 


【深入 学 习 】 这 个 页 面 展示 了 Windows 标准 颜色 名 词 的 显示 效果 ， 但 从 设计 页 面 的 角度 来 说 ， 这 
里 有 个 技巧 ， 即 一 个 页 面 中 使 用 的 颜色 最 好 不 要 超过 4 种 颜色 ， 至 于 设计 文本 通常 情况 下 就 更 不 必用 
得 五 颜 六 色 。 颜 色 是 一 种 语言 ， 它 更 深层 次 的 作用 是 传递 页 面 的 信息 ， 如 橙色 、 黄 色 显 得 活泼 ， 红 色 
显得 有 激情 ， 绿 色 代 表 了 健康 祥和 ， 蓝 色 代表 了 稳重 、 内 敛 、 平 静 等 。 用 错 颜色 有 时 也 会 表 错 意 。 


5.3 不 寻常 的 图 像 应 用 


在 页 面 中 放 入 的 图 像 文 件 大 部 分 为 JPEG、GIF 和 PNG。JPEG 图 像 就 如 生活 中 看 到 的 照片 一 样 ， 
没有 什么 特别 之 处 ， 而 计算 机 中 的 图 像 具有 一 些 不 同 于 照片 的 特性 。 如 GIF 图 像 和 PNG 图 像 就 有 一 些 
特殊 的 效果 ，GIF 图 像 可 以 制作 成 简单 的 动画 ， 而 PNG 图 像 带 有 透明 通道 ， 可 以 制作 透明 图 像 。 


5.3.1 会 动 的 GIF 图 像 


GIF 图 像 可 以 用 来 制 成 逐 帧 动画 ， 逐 帧 动画 就 是 指 将 一 幅 幅 图 像 在 时 间 帧 上 依次 绘制 。 如 早年 的 
动画 片 制作 一 样 ， 动 画 和 图 像 相 比 ， 其 最 大 的 优势 是 能 够 表现 一 个 具体 动作 ， 传 递 给 浏览 者 不 一 样 的 
信息 。GIF 动画 也 是 占用 空间 最 小 的 一 种 动画 ， 所 以 在 页 面 中 得 到 广泛 的 使 用 ， 如 程序 5.3 在 页 面 中 放 
入 的 是 一 个 GIF 动画 。 
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【本 节 示 例 参考 : 资料 光盘 \ 第 5 章 \5-3 ”使 用 GIF 动画 点 缀 页 面 .html】 
【实例 5-3】 使 用 GIF 动画 点 缓 页 面 的 方法 ， 其 源码 展示 如 下 : 
程序 5.3 ”使 用 GIF 动画 点 缀 页 面 .html 


01 <html> 
02 <head> 

03 <title> 使 用 GIF 动画 文件 </title> 

04 </head> 

05 <body> 

06 <h3> 会 动 的 图 像 </h3> 

07 <img src=" 图 片 / 狗 .gif*> 1// 放 入 GIF 动画 
08 </body> 

09 </html> 


【运行 程序 】 在 浏览 器 中 显示 的 结果 如 图 5.4 所 示 。 
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会 动 的 图 像 


图 5.4 使 用 GIF 动画 


【深入 学 习 】 当 在 浏览 器 中 查看 这 个 页 面 时 ， 宠 物 狗 会 皮 眼 睛 ， 摆 动 它 可 爱 的 尾巴 ， 这 是 因为 放 
入 的 是 GIF 动画 的 图 像 ， 其 本 身 和 HTML 放 入 图 像 的 方法 没有 区 别 。 页 面 中 还 有 一 种 常用 的 动画 文 
件 一 一 Flash。Flash 不 仅 能 实现 会 动 的 图 像 ， 而 且 能 制作 出 交互 式 的 动画 效果 。Flash 也 较 GIF 能 制作 
更 丰富 的 效果 ， 可 以 表达 时 间 更 长 的 动画 等 。 


VE 
| 重 说明: Flash 的 内 容 将 会 在 第 15 章 中 介绍 。 


5.3.2 图像 的 透明 通道 


了 解 图 像 的 透明 通道 之 前 ， 首 先 要 理解 图 层 的 概念 ， 计 算 机 中 的 图 像 并 不 像 生活 中 的 照片 一 样 ， 
拿 在 手中 就 是 薄 薄 的 一 层 纸 。 试 想 ， 如 果 把 两 张 照片 登 加 在 一 起 ， 当 然 ， 只 能 看 到 最 上 面 的 那 张 照片 ， 
但 如 果 最 上 面 的 那 张 照片 是 透明 的 ， 人 们 就 能 完全 看 到 下 层 照片 的 内 容 ， 如 果 那 张 照片 是 半 透 明 的 ， 
那么 下 层 的 照片 就 可 以 若隐若现 出 来 。 在 计算 机 中 ， 设 计 者 制作 图 像 时 ， 就 是 使 用 这 样 的 一 种 思路 来 
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制作 图 像 。 很 多 格式 的 图 像 都 具有 透明 通道 ， 如 PNG、BMP、TGA 等 。 如 图 5.5 所 示 ， 这 是 一 幅 橙色 
背景 的 网 页 。 图 5.6 分 别 是 相同 内 容 、 不 同 格 式 的 图 像 ， 图 像 格 式 分 别 为 JPEG 和 PNG。 


- SEE 
ER 
全 a Co 
> 中 7 
了 二 -于 cake.jpg cake.png 
图 5.5 橙色 背景 图 5.6 ”cake 不 同 格式 的 对 比 


通过 肉眼 几乎 很 难 分 别 JPEG 图 像 和 PNG 图 像 的 区 别 ， 如 果 仔 细 观 察 ， 可 以 发 现 PNG 图 像 的 背 
景色 稍 许 偏 灰色 一 些 。 接 下 来 ， 将 图 5.6 中 的 两 幅 不 同 格式 的 cake 图 像 放 入 到 图 5.5 的 橙色 背景 页 面 
中 去 ， 如 程序 5.4 所 示 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 5 章 \5-4 对比 JPEG 图 像 和 PNG 图 像 .html】 
【实例 5-4】 对 比 JPEG 图 像 和 PNG 图像， 其 源码 展示 如 下 : 


程序 5.4 对 比 JPEG 图 像 和 PNG 图 像 .html 


01 <html> 

02 <head> 

03 <title> 对 比 PNG 和 JPEG 图 像 </title> 

04 </head> 

05 <body style="background-colorffcc00"> 

06 <img src=" 图 片 /cake.jpg"> 

07 <img src=" 图 片 /cake.png"> // 分 别 放 入 不 同 格式 的 图 像 
08 </body> 

09 </html> 


cake.png cake.jpg 
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图 5.7 对 比 JPEG 图 像 和 PNG 图 像 
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注意 : 本 小 节 使 用 的 是 Firefox 浏览 器 ， 是 因为 IE 6.0 之 前 版 本 的 浏览 器 存在 并 不 能 直接 显 
示 PNG 图 像 的 问题 。 现 在 大 部 分 Windows 操作 系统 下 自 带 的 都 是 IE 7.0 版 本 以 上 浏览 器 。 


【深入 学 习 】 通 过 比较 ， 发 现 JPEG 图 像 的 背景 依然 是 白色 ， 而 PNG 图 像 的 背景 已 经 消失 了 ， 串 
出 了 网 页 背景 的 颜色 ， 这 就 是 透明 通道 作用 下 的 效果 。 利 用 PNG 图 像 的 这 种 特性 ， 页 面 设计 中 的 图 像 
便 不 再 局 限于 看 上 去 是 个 矩形 ， 图 像 显得 自然 生动 。 

那 究竟 什么 是 透明 通道 ?3 从 原理 上 来 说 ， 颜 色 由 基本 三 原色 构成 ， 所 以 计算 机 中 图 像 具 备 3 个 基 
本 通道 ， 红 色 通 道 、 绿 色 通道 和 蓝 色 通 道 。 图 像 如 同 是 由 三 原色 的 图 层 登 加 而 成 ， 而 此 外 ， 在 此 基础 
上 再 加 上 一 个 透明 通道 来 控制 图 像 的 透明 度 。 透明 通道 又 称 之 为 Alpha 通道 ， 是 一 个 8 位 的 灰 度 通道 ， 
该 通道 用 256 级 灰 度 来 记录 图 像 中 的 透明 度 信息 。 所 以 ，PNG 图 像 是 带 有 透明 通道 的 ， 而 JPEG 图 像 
不 带 有 透明 通道 。 

5.3.3 ” 带 有 透明 通道 图 像 的 应 用 

正 因为 PNG 图 像 可 以 保留 透明 通道 ， 图 像 放 在 页 面 中 不 会 出 现 白色 边缘 ， 如 果 在 已 有 背景 颜色 的 
页 面 上 再 添加 背景 图 像 ， 就 可 以 做 好 图 像 和 背景 色 很 好 的 融合 。 这 样 对 于 设计 者 来 说 ， 可 以 作为 背景 
素材 的 选择 就 大 大 增加 了 。 

此 外 ， 由 于 透明 通道 可 以 控制 图 像 的 透明 度 ， 当 图 像 设置 一 定数 值 的 透明 度 时 ， 可 以 使 背景 图 像 
若隐若现 地 表现 出 来 , 如 阴影 效果 。 如 图 5.8 所 示 是 一 张 画面 内 容 为 圣 诈 树 的 图 像 , 这 里 分 别 使 用 JPEG 
和 PNG 格式 来 制作 页 面 背景 。 程 序 5.5 将 这 张 图 像 设置 为 页 面 背 景 

【本 节 示 例 参考 ， 资料 光盘 \ 第 5 章 \5-5 ”同时 使 用 背景 图 像 和 背景 颜色 的 效果 html]】 
【实例 5-5】 同时 使 用 背景 图 像 和 背景 颜色 的 效果 ， 其 源码 展示 如 下 : 


程序 5.5 ”同时 使 用 背景 图 像 和 背景 颜色 的 效果 .html 


01 <html> 

02 <head> 

03 <title> 同 时 使 用 背景 图 像 和 背景 颜色 的 效果 </title> 

04 </head> 

05 <body bgcolor="#99CC33" // 设 置 页 面 背 景 颜色 
06 background=" 图 片 /圣诞 树 .png"> /设置 页 面 背景 图 像 
07 </body> 

08 </html> 


说 明 : 实例 5-5 中 使 用 的 是 PNG 图 像 ， 如 果 使 用 JPEG 图 像 ， 更 改 图 片 格式 就 可 以 了 。 


【运行 程序 】 这 个 页 面 最 终 的 浏览 效果 如 图 5.9 所 示 。 


ws 


第 5 部“ 让 网 页 赤 得 更 约 庆 Se 


PNG 图 像 页 面 背景 JPEG 图 像 页 面 背景 
图 5.8 圣诞 树 图 5.9 不 同 格式 图 像 配合 背景 颜色 的 效果 


【深入 学 习 】 代 码 第 5 行 中 “#99CC33”， 说 明 使 用 了 绿色 的 背景 颜色 。 而 从 图 5.9 中 对 比 可 以 发 
现 ，JPEG 图 像 作为 背景 图 像 时 ， 带 有 白色 背景 的 “圣诞 树 ” 图 像 会 覆盖 后 面 的 背景 色 。 

也 许 去 除 图 像 的 白色 背景 并 不 是 十 分 的 有 意思 ， 所 以 PNG 图 像 更 进一步 的 使 用 将 更 神奇 。 阴 影 效 
果 是 其 中 最 典型 、 最 常见 的 一 种 用 法 。 在 页 面 中 ， 为 了 突出 文字 标题 ， 如 导航 栏 、 目 录 栏 等 。 通 常设 
计 者 会 将 文字 转换 成 PNG 图 像 ， 应 用 不 同 的 效果 ， 如 添加 阴影 、 发 光 边 缘 ， 使 之 成 为 页 面 的 焦点 。 
图 5.10 是 已 经 做 好 阴影 的 图 像 。 

图 中 “阴影 效果 ”图 层 背景 的 棋盘 格 是 Photoshop 中 表示 空白 图 层 的 特定 使 用 。 所 以 ， 图 像 中 的 内 
容 实际 上 只 有 4 个 字 和 字体 所 带 有 的 阴影 部 分 。 而 阴影 在 图 像 中 是 一 种 半 透 明 状 态 ， 意 味 着 可 以 透 过 
阴影 图 像 略 略 看 到 后 面 的 图 层 ， 在 页 面 中 ,后面 的 图 层 就 是 页 面 的 背景 色 。 程序 5.6 将 这 张 图 像 放 入 页 
面 中 。 


一 ， 说明: 空白 图 层 是 指 没有 任何 内 容 ， 包 括 白色 背景 的 图 层 。 


【本 节 示 例 参考 ， 资 料 光盘 \ 第 5 章 \5-6 ”阴影 效果 配合 页 面 背 景色 .html】 
【实例 5-6】 阴 影 效果 配合 页 面 背景 色 ， 其 源码 展示 如 下 : 


程序 5.6 ”阴影 效果 配合 页 面 背景 色 .html 


<html> 
<head> 
<title> 阴 影 效果 配合 页 面 背 景色 </title> 
</head> 
<body body bgcolor="#99CC33"> ll 设置 好 页 面 的 背景 色 
<img src=" 图 片 /阴影 效果 .png"> // 放 入 图 像 
</body> 
</html> 


【运行 程序 】 最 终 在 页 面 中 的 显示 效果 如 图 5.11 所 示 。 
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图 5.10 阴影 效果 图 5.11 页 面 中 阴影 效果 
【深入 学 习 】 在 页 面 中 ， 配 合 背 景色 或 背景 图 像 时 ， 漂 亮 的 效果 就 被 呈现 出 来 。 所 以 在 页 面 中 ， 
有 些 文本 的 内 容 ， 其 中 相当 一 部 分 都 是 以 图 像 的 形式 展示 出 来 ,利用 PNG 图 像 的 透明 通道 来 添加 这 样 


的 效果 。 当 然 ， 阴 影 效 果 只 是 其 中 一 种 ， 有 兴趣 的 读者 可 以 充分 发 挥 创作 想象 ， 在 页 面 中 实现 更 有 趣 


5.4 案例 : 修饰 普通 页 面 


在 第 4 章 的 4.5 节 中 制作 了 一 个 普通 的 描述 宠物 的 页 面 。 在 本 章 中 , 将 实践 如 何 将 这 个 普通 页 面 修 
饰 得 更 加 漂亮 。 在 这 个 例子 中 ， 首 先 将 给 宠物 页 面 改动 页 面 背景 ， 同 时 为 了 进一步 美观 ， 将 “Jenny” 
文本 标题 转换 成 PNG 图像， 这样 设 计 者 可 以 赋予 标题 更 多 的 设计 ， 如 程序 5.7 将 这 些 设计 的 想法 转化 
成 代码 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 5 章 \5-7 ”进一步 修饰 宠物 页 面 .html】 

【实例 5-7】 进 一 步 修 饰 宠 物 页 面 ， 其 源码 展示 如 下 : 

程序 5.7 进一步 修饰 宠物 页 面 .html 


01 <!IDOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitiona//EN" 
02 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
03 <html xmlns="http://www.w3.org/1999/xhtml"> 


04 <head> 

05 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
06 <title> 进 一 步 修 饰 宠物 页 面 </title> 

07 </head> 

08 <body background=" 图 片 /宠物 页 面 背景 .png"> 

09 <! 一 设置 页 面 背景 一 > 

10 <p><img src=" 图 片 /我 的 宠物 banner.gif' width="1017" height="24" /></p> 
11 <! 一 插入 页 面 banner --> 

12 <p><img src=" 图 片 /jenny.png"> 

13 <! 一 插入 页 面 图像 -> 

14 <p><img src=" 图 片 /我 的 宠物 .gif' width="192" height="262" border="2" align="right" 
15 [></p> 
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16 < 一 插入 页 面 图 像 -> 


17 <p> 年 龄 :24<br/> 

18 最 喜爱 的 食物 : 小 虾 、 肉 <br/> 

19 特点 : 很 安静 </p> 

20 <p><hr align="left" width="400" size="3" > 

21 <p> <h3 style="color:red">&nbsp; 更 新 宠物 日 记 </h3> 

22 <hr align="left" width="400" size="3" > 

23 <p>2008 年 9 月 1 号 </p> 

24 <p>&nbsp; 外 面 的 天 气 还 是 很 热 ， 所 以 Jenny 一 直 都 懒 懒 的 趴 在 那里 ， 好 久 也 <br> 不 愿意 动 一 下 ， 


25 当然 ， 看 到 好 吃 的 食物 时 还 是 会 激动 那么 一 下 的 ，<br>Jenny 很 聪明 ， 看 到 主人 来 了 ， 就 会 探 出 脑袋 ， 
26 一 直 采 着 你 。 <br /> 

27 </body> 

28 </html> 


【运行 程序 】 浏 览 该 页 面 ， 运 行 的 结 
果 如 图 5.12 所 示 。 

【深入 学 习 】 代 码 第 8 行 中 添加 了 背 
景 图 像 , 第 10 行将 原先 的 Jenny 文本 转化 
成 PNG 图 像 ， 由 此 添加 了 更 多 的 效果 , 如 
文字 描 边 、 图 像 阴影 ， 在 页 面 中 显得 更 加 
醒目 。 在 第 21 行 中 ， 将 文本 修饰 为 红色 ， 
以 达到 提高 吸引 眼球 的 作用 。 虽 然 是 小 小 
的 改动 ， 但 在 页 面 中 显示 出 来 却 是 大 大 的 
改观 ， 如 图 5.12 所 示 是 这 个 页 面 的 最 终 
效果 。 


55. 小 结 


本 章 的 知识 是 基于 第 4 章 图 像 的 运用 之 上 ， 计 算 机 世界 中 的 图 像 是 有 别 于 现实 图 像 的 。 本 章 的 内 
容 主要 就 是 针对 于 这 些 不 同 之 处 ， 如 何在 页 面 中 充分 发 挥 计 算 机 图 像 的 作用 。 本 章 给 出 了 一 些 重要 的 
图 像 基 础 知识 ， 主 要 的 知识 点 有 : 

口 计算 机 中 颜色 数量 有 限 ， 由 每 一 个 颜色 值 来 描述 每 一 种 颜色 。 

口 改变 页 面 背景 色 。 

口 ”修改 文本 颜色 。 

口 GIF 图 像 的 动画 效果 。 

口 用 PNG 图 像 的 透明 通道 来 展示 阴影 效果 。 

在 第 6 章 中 将 介绍 网 页 的 链接 ， 网 页 之 所 以 能 够 成 为 网 站 ， 就 是 因为 有 许多 的 页 面 链接 在 一 起 ， 
这 也 是 网 页 独 具 魅 力 的 地 方 。 
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第 6 章 网 页 链接 


一 个 普通 的 网 站 ， 就 是 将 许多 页 面 链接 在 一 起 ， 用 户 通过 网 站 的 主页 查找 网 站 中 的 所 有 页 面 ， 而 
网 页 彼此 之 间 的 链接 ， 则 称 之 为 页 面 的 链接 。 这 就 像 在 书本 中 查找 目录 时 ， 在 第 一 页 的 目录 中 找到 所 
需 资料 的 所 在 书页 ， 然 后 根据 所 在 页 数 翻 找到 此 页 。 而 在 网 站 中 ， 用 户 在 页 面 中 选择 链接 内 容 ， 页 面 
则 会 自动 跳 转 到 所 在 的 页 面 。 本 章 的 主要 内 容 如 下 。 

口 ”理解 网 页 链接 。 

口 学习 基 本 的 链接 形式 。 

口 ” 如 何 修饰 链接 的 状态 。 

口 了 解 特殊 形式 的 链接 。 


6.1 网 页 链接 概述 


所 谓 的 链接 是 指 从 一 个 页 面 指向 一 个 目标 的 链接 关系 ， 这 个 目标 是 多 种 样式 的 ， 可 以 是 一 个 网 页 ， 
也 可 以 是 相同 网 页 的 不 同位 置 ， 甚 至 可 以 是 一 张 图 片 、 一 个 电子 邮件 地 址 、 一 个 应 用 程序 。 当 用 户 单 
击 已 经 链接 的 页 面 内 容 时 ， 链 接 目 标 将 显示 在 浏览 器 上 ， 并 根据 目标 的 类 型 来 运行 。 

可 以 说 , 在 一 个 大 型 网 站 中 ， 网 页 的 链接 已 经 充斥 着 网 站 中 的 每 个 角落 。 如 图 6.1 所 示 是 一 家 门户 
网 站 的 主页 。 在 这 样 的 一 个 主页 中 ， 用 户 可 以 看 到 的 每 一 行文 本 、 每 一 张 图 片 ， 几 乎 所 有 的 页 面 内 容 
都 是 页 面 链接 。 
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图 6.1 链接 主页 


6.1.1 初 识 页 面 链接 


在 HTML 文档 中 ， 使 用 <a> 标 签 指引 页 面 中 链接 的 目标 点 ， 让 设计 者 创建 指向 目标 点 的 链接 。 在 
链接 的 属性 中 ， 代 码 的 写法 为 : 

<a href= "链接 对 象 的 路 径 "> 链 接 锚 点 对 象 

</a> 

用 a 来 表示 锚 点 ，a 也 源 自 于 英文 中 的 anchor。href 属性 的 意思 是 超 文本 引用 ， 这 个 属性 的 值 指定 
了 链接 的 目标 。 在 一 个 完整 的 链接 语句 中 包含 两 个 部 分 ， 即 链接 锚 点 对 象 和 链接 地 址 ， 如 程序 6.1 是 一 
个 简单 的 链接 页 面 ， 程 序 6.2 是 另 一 个 页 面 。 通 过 链接 的 方法 ， 将 使 程序 6.1 的 A 页 面 跳 转 到 程序 6.2 
的 B 页 面 。 

【本 节 示 例 参考 ， 资 料 光 盘 \ 第 6 章 \A.html B.html】 


【实例 6-1】 页 面 A， 其 源码 展示 如 下 : 


程序 6.1 A.html 
01 <html> 
02 <head> 
03 <title> 页 面 A </title> 
04 </head> 
05 <body> 
06 <h1><a href="B.html">A</a> </h1> // 超 链接 到 页 面 B 
07 <h1>B</h1> 
08 </body> 
09 </html> 
【实例 6-2】 页 面 B， 其 源码 展示 如 下 : 
程序 6.2 B.html 
01 <html> 
02 <head> 
03 <title> 页 面 A </title> 
04 </head> 
05 <body> 
06 <h1> 页 面 A </h1> 
07 <h1><a href="A.html"> 页 面 B</a></h1> // 超 链接 到 页 面 A 
08 </body> 
09 </html> 


【运行 程序 】 最 终 在 浏览 器 中 的 结果 如 图 6.2 所 示 。 

【深入 学 习 】 单 击 “ 页 面 A” 链 接 时 ， 页 面 会 跳 转 到 B 页 面 ， 单 击 “ 页 面 B” 链 接 ， 也 会 跳 转 回 
A 页 面 。 在 A、B 两 个 页 面 代码 中 ， 页 面 A 代码 中 的 第 6 行 和 页 面 B 代码 中 的 第 7 行 ， 放 入 <a> 标 签 
中 的 内 容 便 是 链接 的 锚 点 对 象 ， 如 文本 “页 面 A” 和 “页 面 B”。 而 在 <a> 标 签 中 ，href 属性 下 的 内 容 
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如 A.html 和 B.html， 这 两 个 页 面 存 放 的 地 址 即 是 链接 的 地 址 ， 这 两 个 元 素 结合 在 一 起 ， 便 完成 了 一 个 


图 6.2 理解 页 面 链接 


6.1.2 理解 链接 地 址 


链接 地 址 指 的 是 链接 到 锚 点 对 象 的 路 径 ， 这 个 路 径 所 指 的 不 仅 是 一 个 页 面 地 址 ， 也 可 能 是 一 个 文 
件 地 址 、 一 个 邮箱 地 址 。 那 么 ， 对 于 一 个 页 面 的 链接 ， 该 如 何 去 定 位 这 个 链接 对 象 的 路 径 呢 ? 如 程序 
6.3 是 通过 一 个 链接 地 址 跳 转 到 另 一 个 页 面 ， 结 果 如 图 6.3 所 示 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 6 章 \6-3 ”链接 内 容 的 路 径 .html】 

【实例 6-3】 链 接 内 容 的 路 径 ， 其 源码 展示 如 下 : 


程序 6.3 ”链接 内 容 的 路 径 .html 


01 <html> 
02 <head> 

03 <title> 链 接 内 容 的 路 径 </title> 

04 </head> 

05 <body> 

06 <h1> 链 接 内 容 的 路 径 </h1> 

07 <h1><a href=" 图 片 /时 间 表 .jpg "> 时 间 表 // 图 像 即 是 链接 的 目标 
08 </a></h1> 

09 </body> 

10 </html> 


【运行 程序 】 浏 览 该 页 面 ， 运 行 的 结果 如 图 6.3 所 示 。 


图 6.3 链接 内 容 的 路 径 
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【深入 学 习 】 单 击 “时 间 表 ”链接 时 ， 页 面 即 跳 转 到 图 片 ， 而 图 片 则 显示 在 新 的 页 面 中 。 在 这 个 
例子 中 ， 从 图 6.3 中 的 浏览 器 地 址 栏 可 以 看 出 ， 以 .html 为 后 级 的 页 面 文件 “6-3 链接 内 容 的 路 径 .html” 
是 放 在 命名 为 “资料 光盘 ”的 文件 夹 下 ， 而 页 面 链接 的 内 容 ， 即 JPEG 文件 “时 间 表 jpg”， 是 放 在 “图 
片 ” 文 件 夹 中 ， 而 “图 片 ”文件 夹 又 是 放 在 “资料 光盘 ”文件 下 ， 因 而 页 面 文件 和 “图 片 ”文件 夹 属 
于 同一 目录 下 。 这 样 层 层 递 推 的 关系 可 以 令 浏览 器 找到 这 张 图 像 ， 如 图 6.4 中 文件 夹 的 位 置 。 


ET [3 
Bi. FB Pur Er 国 - 
地 址 0) | 忆 F:\ 交 和 Xt 意 。。 


门 目 釉 
文 省 和 文 溃 卖 任务 ¥y 日 | [a 一 一 图 片 文件 夹 


-aa 全 | 车" 一 > 页 面 文件 


图 6.4 ”页面 文件 和 图 片 文件 夹 


说 明 : 资料 光盘 中 页 面 图 像 的 位 置 : 资料 光盘 \ 第 6 章 \ 图 片 文件 夹 。 


所 以 在 代码 中 定义 链接 对 象 的 路 径 时 , 有 这 样 一 个 规律 :所 链接 的 内 容 ,如 实例 6-3 中 “时 间 表 .jpg”， 
从 和 页 面 文件 同一 目录 下 的 文件 夹 起 开始 定义 , 如 实例 6-3 中 “6-3 链接 内 容 的 路 径 .html” 是 页 面 文件 。 
而 “图 片 ”文件 夹 是 和 页 面 文件 属于 同一 目录 下 。 为 了 正确 引用 图 像 的 路 径 ， 代 码 第 7 行 中 定义 图 像 
的 路 径 ， 就 需要 从 “图 片 ”文件 夹 这 个 位 置 开始 定义 。 


全 注意 : 如 果 将 页 面 文件 “6-3 链接 内 容 的 路 径 .html” 放 在 文件 夹 F 盘 中 ,那么 链接 地 址 的 路 


径 就 应 该 改 为 “<a hre 作 "资料 光盘 /图 片 /时 间 表 .jpg">”。 


6.2 链接 的 种 种 不 同 


链接 的 分 类 有 种 种 不 同 ， 使 用 的 方法 却 大 同 小 异 ， 创 建 一 个 超 链接 很 容易 。 事 实 上， 设计 者 使 用 
到 的 只 有 <a> 标 签 而 已 。 虽 然 链接 的 方法 类 似 ， 但 其 展示 的 形式 却 自由 多 变 ， 如 链接 的 方式 、 链 接 指 向 
何 处 等 。 而 从 使 用 者 的 角度 来 说 ， 设 计 者 最 重要 的 是 保持 链接 的 友好 性 。 
6.2.1 基本 的 文本 链接 

文本 的 链接 是 页 面 中 最 常见 的 链接 形式 ， 也 是 最 基本 的 一 种 链接 使 用 。 一 般 文 本 链接 中 ， 最 初 文 
字 上 的 超 链接 呈 蓝 色 ， 文 字 下 面 有 一 条 下 划 线 ， 如 果 超 链接 已 经 被 浏览 过 了 ， 文 本 颜色 就 会 发 生 改 变 ， 
默认 是 紫色 。 设 置 文本 的 链接 时 ， 在 文本 的 段落 中 直接 使 用 <a> 标 签 。 如 程序 6.4 是 一 个 文本 的 链接 。 
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【本 节 示 例 参考 : 资料 光盘 \ 第 6 章 \6-4 ”文本 链接 .html】 
【实例 6-4】 文 本 链接 的 代码 如 下 : 
程序 6.4 文本 链接 .html 


01 <html> 

02 <head> 

03 <title> 蝙 蝠 侠 之 黑暗 骑士 </title> 

04 </head> 

05 <body> 

06 <h3> 影 片 《蝙蝠 侠 之 黑暗 骑士 》</h3> 

07 可 怕 的 黑暗 渐渐 散 去 的 哥 谭 市 ， 逐 渐 恢 复 了 往日 的 平静 。 犯 罪 率 呈 直线 下 降 …… 
08 凶残 的 小 丑 带 着 他 <!-“ 小 丑 ” 是 链接 的 位 置 -> 

09 </body> 

10 </html> 


【运行 程序 】 结 果 如 图 6.5 所 示 ， 将 链接 的 锚 点 对 象 放 入 <a href> 标 签 内 就 可 以 完成 链接 了 ， 当 单 
击 文本 “小 丑 ” 链 接 时 ， 页 面 跳 转 到 链接 的 页 面 。 


| 


图 6.5 文本 链接 


6.2.2 基本 的 图 像 链 接 

图 像 链接 的 使 用 频率 和 文本 链接 一 样 相 当 高 ， 设 置 链接 的 方法 和 文本 无 异 ， 在 引用 图 片 的 代码 前 
面 先 放 入 <a> 标 签 。 代 码 如 下 : 

<a href="..."> 

<img src="..."> 

</a> 

【本 节 示 例 参考 : 资料 光盘 \ 第 6 章 \6-5 ”设置 图 像 链 接 .html】 

【实例 6-5】 设 置 图 像 链接 的 方法 ， 其 源码 展示 如 下 : 

程序 6.5 ”设置 图 像 链接 .html 


01 <html> 
02 <head> 
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03 <title> 图 像 的 链接 </title> 

04 </head> 

05 <body> 

06 <h3> 图 像 的 链接 </h3> 

07 <a href= "苏轼 简介 .html"> // 这 里 链接 到 目标 页 面 
08 <img src=" 图 片 / 吏 部 陈 公 诗 跨 jpg"> // 这 张 图 像 是 链接 的 位 置 
09 </a> 


图 6.6 ”图像 的 链接 
【深入 学 习 】 代 码 中 第 6 一 8 行 即 是 对 页 面 文档 调用 的 图 像 设 置 链接 。 依 照 这 种 方法 ， 对 于 设置 
Flash 文件 或 是 引用 其 他 文件 的 链接 都 是 一 样 的 。 
此 外 ， 有 时 使 用 的 图 片 是 非 正规 矩形 时 ， 图 像 会 出 现 边 框 ， 如 图 6.6 中 的 图 像 边 框 。 如 果 想 去 除 边 
框 , 可 以 在 代码 中 添加 代码 “border=0”。 那么 代码 第 8 行 则 可 以 写 为 “<img src=" 图 片 /更 部 陈 公 诗 跋 jpg" 
border=0>”。 


说 明 : 使 用 CSS 样式 表 修 饰 图 像 会 是 一 种 更 好 的 方法 。 


6.2.3 ”把 邮箱 留 给 需要 联系 你 的 人 


<a> 标 签 不 仅 是 网 页 和 网 页 之 间 ， 或 者 网 页 和 文件 的 链接 ， 还 可 以 链接 电子 邮箱 地 址 。 这 是 通过 网 
页 让 使 用 者 和 设计 者 联系 的 最 方便 的 方法 。 当 然 ， 也 可 以 直接 在 页 面 中 留 下 电子 邮件 地 址 ， 但 有 时 为 
了 突出 友好 性 ， 不 是 直接 留 下 地 址 ， 而 是 采用 将 邮箱 链接 到 页 面 内 容 上 的 方式 ， 使 用 方法 如 下 : 

<a href="mailto: 邮 箱 地 址 "> 链接 锚 点 对 象 


</a> 


mailto 其 实 就 是 mail to 的 连 写 ， 意 思 是 “把 邮件 发 送 到 ”。 在 这 行 代码 中 ， 还 可 以 给 新 邮件 填 好 
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邮件 的 主题 和 正文 ， 这 样 打开 电子 邮件 程序 就 填 好 了 收 信人 的 新 邮件 。 这 通过 属性 subject 和 body 来 
实现 ， 使 用 时 有 些 特别 ， 需 要 放 在 两 个 问号 之 间 ， 如 程序 6.6 链接 到 的 邮箱 地 址 。 

【本 节 示 例 参考 ， 资 料 光盘 \ 第 6 章 \6-6 ”链接 邮箱 地 址 .html】 

【实例 6-6】 链 接 邮箱 地 址 的 方法 ， 其 源码 展示 如 下 : 


程序 6.6 ”链接 邮箱 地 址 .html 


01 <html> 
02 <head> 
03 <title> 邮 箱 的 链接 </title> 
04 </head> 
05 <body> 
06 <h1> 邮 箱 链接 </h1> 
07 <alhref="mailto:huizhao@foxmail.com?subject= 联 系 我 [body= 告 诉 我 们 你 对 网 页 设 
08 计 的 想法 ?"> 告诉 我 们 你 对 网 页 设计 的 想法 ? 
09 </body> 
10 </html> 

【运行 程序 】 在 浏览 器 中 的 效果 如 图 6.7 所 示 ， 当 单 击 “ 告 诉 我 们 你 对 网 页 设计 的 想法 ”链接 时 ， 

系统 会 自动 打开 邮件 客户 端 。 
有 Ey 
6.7 ”邮箱 的 链接 
注意 : 如 果 浏览 者 的 系统 没有 安装 邮件 客户 端 ， 则 会 给 使 用 者 带 来 很 大 麻烦 。 因 此 ， 这 种 
使 用 方法 在 某 些 时 候 也 遭 到 设计 者 的 排斥 。 


【深入 学 习 】 互 联网 中 充斥 着 很 多 垃圾 邮件 的 制造 者 ， 他 们 创建 电子 邮件 的 数据 库 ， 然 后 给 电子 
邮件 地 址 发 送 大 量 的 垃圾 邮件 。 这 其 中 有 一 种 方法 就 是 使 用 程序 自动 搜索 含有 mailto 的 链接 。 所 以 为 
了 防止 垃圾 邮件 ， 有 时 也 把 邮件 地 址 的 英文 字母 转换 成 ASCIT 字符 。 例 如 ， 在 实例 6-6 的 邮箱 地 址 
huizhao@foxmail.com 中 改动 其 中 一 个 或 部 分 字母 , 在 ASCII 字符 中 小 写字 母 “a” 的 代码 是 “&#97;”， 
那么 邮件 的 地 址 可 写成 “huizh&#97;o@ foxmail.com”, 这 样 程序 搜索 出 来 的 便 是 乱码 的 电子 邮件 地 址 。 
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6.2.4 在 同一 页 面 中 快速 查找 信息 


页 面 除了 和 页 面 之 外 的 文件 或 程序 链接 外 ， 也 可 以 和 同一 页 面 中 的 内 容 进行 链接 。 这 种 情况 通常 
用 于 导航 ,为 的 是 浏览 页 面 的 人 直接 可 以 跳 到 自己 需要 的 信息 版 块 上 。 由 于 是 在 同一 页 面 内 实现 链接 ， 
也 就 是 说 ， 页 面 链接 的 路 径 就 是 在 同一 页 面 内 ， 所 以 在 HTML 语言 中 使 用 <a> 标 签 中 的 id 属性 来 确定 
路 径 位 置 。 通 过 以 下 两 个 步骤 可 以 理解 这 种 代码 的 用 法 。 

(1) 要 确定 链接 的 锚 点 对 象 , 不 同 于 页 面 和 外 部 文件 链接 的 方式 , 链接 的 路 径 由 于 在 同一 页 面 内 ， 
这 里 需要 使 用 “#” 来 引用 同一 页 面 中 的 内 容 。 代 码 如 下 : 

<a href=#...> 

<a> 

(2) 需要 在 页 面 中 设 定 出 链接 的 目标 。 使 用 的 就 是 id 属性 。 


<aid=...> 


E 二 说 明 : id 也 可 以 写成 hame， 区 别 在 于 name 是 HTML 的 标准 ， 而 id 是 XHTML 中 的 标准 
要 求 。 


id 属性 后 放 入 的 内 容 , 就 是 第 1) 步 中 href 属性 下 设 定好 的 内 容 。 这 样 前 后 呼应 ， 自 然 就 很 容易 
找到 位 置 。 

【本 节 示例 参考 ， 资 料 光盘 \ 第 6 章 \6-7 ”同一 页 面 内 实现 链接 .html] 

【实例 6-7】 同 一 页 面 内 实现 链接 ， 其 源码 展示 如 下 : 


程序 6.7 同一 页 面 内 实现 链接 .html 


01 <html> 

02 <head> 

03 <title> 同 一 页 面 内 实现 链接 </title> 

04 </head> 

05 <body> 

06 <h2> 世 界 博览 会 </h2> 

07 <a href=# 概 述 > 概述 </a> 

08 <br><a href=# 世 界 博览 会 的 历史 与 由 来 > 世界 博览 会 的 历史 与 由 来 </a> 
09 ”<!- 设 置 页面 的 锚 点 链接 一 > 

10 <br><a href=# 国 际 博览 局 与 世界 博览 会 > 国际 博览 局 与 世界 博览 会 </a> 
11 <!- 设 置 页 面 的 错 点 链接 一 > 

12 <br><a href=# 中 国 与 世界 博览 会 > 中 国 与 世界 博览 会 </a> 

13 ”<!- 设 置 页面 的 锚 点 链接 一 > 

14 <p> 

15 <h3><a id= 概 述 ></a> 概 述 </h3> 

16 <!-- 锚 点 的 位 置 -> 

i <br>&nbsp;&nbsp; 世 界 博览 会 (World Exhibition or Exposition， 简 称 World Expo) 是 一 项 由 主办 
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18 国政 府 组 织 或 政府 委托 有 关 部 门 举办 的 有 较 大 影响 和 悠久 历史 的 国际 性 博览 活动 。 它 
人 

20 <br>&nbsp;&nbsp; 世 界 展览 会 的 会 场 不 单 是 展示 技术 和 商品 ， 而 且 伴 以 异彩 纷呈 的 表演 ， 富 有 
21 魅力 的 壮观 景色 ， 设 置 成 日 常生 活 中 无 法 体验 的 、 充 满 节日 气氛 的 空间 ， 

2 

23 <p><h3><a id= 世 界 博览 会 的 历史 与 由 来 ></a> 世 界 博览 会 的 历史 与 由 来 </h3> 

24 <!-- 锚 点 的 位 置 --> 

25 <br>&nbsp;&nbsp; 在 古代 农耕 社会 ， 人 们 往往 在 庆贺 丰收 、 宗 教 仪式 、 欢 度 喜庆 的 节日 里 展开 
26 交易 活动 ， 后 来 逐渐 发 展 成 为 定期 的 、 有 固定 场所 的 、 以 物品 交换 为 目的 的 大 型 贸易 

2750 

28 <p><h3><a id= 国 际 博览 局 与 世界 博览 会 ></a> 国 际 博览 局 与 世界 博览 会 </h3> 

29 <!-- 锚 点 的 位 置 -> 

30 <br>&nbsp;&nbsp; 举 办 世界 博览 会 的 目的 往往 是 为 庆祝 一 个 重大 的 历史 事件 或 一 个 地 区 、 一 个 
31 国家 的 重要 纪念 活动 : 为 了 展示 人 类 在 单一 或 多 个 领域 中 ， 政 治 、 经 济 、 文 化 、 科 技 等 方面 

32000 

33 <p><h3><a id= 中 国 与 世界 博览 会 ></a> 中 国 与 世界 博览 会 </h3> 

34 <!- 锚 点 的 位 置 --> 

35 <br>&nbsp;&nbsp; 中 国 第 一 次 参加 世界 博览 会 应 该 始 于 1873 年 的 维也纳 世界 博览 会 ， 中 国 的 
36 参加 方式 也 是 赛 奇 会 本 身 的 一 奇 。 因 为 代表 中 国 的 是 一 个 叫 包 腊 〈EoCoBowra) 的 英国 
3 

38 </body> 

39 </html> 


【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 6.8 所 示 。 


图 6.8 同一 页 面 内 的 链接 


【深入 学 习 】 由 于 页 面 太 长 ， 当 单 击 目录 栏 时 ， 页 面 会 跳 到 相应 的 目标 位 置 ， 以 方便 浏览 者 阅读 
页 面 信息 ， 这 是 提高 页 面 友 好 性 的 一 个 很 好 的 方法 。 在 这 个 例子 中 ， 注 意 第 8、10、12 行 和 第 23、28、 
33 行 之 间 的 呼应 。 

在 图 中 单 击 “ 世 界 博 览 会 的 历史 与 由 来 ”目录 时 ， 页 面 自动 跳 转 到 “世界 博览 会 的 历史 与 由 来 ” 
内 容 版 块 。 从 代码 上 看 ， 第 23 行 定义 了 一 个 id 属性 ， 如 同 在 页 面 中 声明 “这 里 是 一 个 目标 位 置 ”， 
而 在 第 8 行 代 码 中 设置 了 超 链接 ， 表 明 “ 链 接 到 这 个 页 面 第 23 行 的 位 置 ”。 
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6.3 提高 页 面 链接 的 友好 度 


在 设置 了 超 链接 的 文本 中 ， 链 接 的 内 容 都 带 有 下 划 线 ， 浏 览 过 的 字体 也 都 是 特定 的 颜色 ， 始 终 给 
人 千篇一律 的 感觉 ， 而 对 于 浏览 者 来 说 ， 这 是 一 种 不 太 和 舒服 的 感受 。 为 了 解决 这 些 问题 ， 使 页 面 展现 
出 灯 和 力 的 一 面 ， 设 计 者 总 是 会 用 一 些 新 颖 的 方法 去 改变 链接 的 状态 。 


6.3.1 美观 链接 的 状态 


链接 的 状态 在 页 面 中 是 很 显眼 的 一 部 分 ， 起 到 的 作用 举足轻重 ， 而 链接 的 样式 是 可 以 通过 定义 来 
修改 的 。 在 修改 之 前 ， 首 先 要 搞 明 白 链接 的 过 程 ， 一 个 链接 状态 ， 可 以 分 解 为 以 下 4 个 步骤 ， 

(1) 链接 还 未 被 访问 。 

(2) 链接 被 选中 时 。 

(3) 鼠标 滑 过 链接 。 

(4) 链接 被 访问 后 。 

使 用 HTML 标签 属性 , 通过 添加 link、alink 和 vlink 来 修改 超 链接 文本 的 颜色 。link 属性 修改 链接 
未 访问 时 的 文本 颜色 ，alink 属性 修改 链接 被 选中 时 文本 的 颜色 ，vlink 属性 修改 链接 被 访问 后 的 文本 颜 
色 。 程 序 6.8 使 用 标签 来 修改 链接 的 文本 颜色 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 6 章 \6-8 ”使 用 标签 属性 修改 文本 链接 颜色 .html】 

【实例 6-8】 使 用 标签 属性 修改 文本 链接 颜色 的 方法 ， 其 源码 展示 如 下 


程序 6.8 使 用 标签 属性 修改 文本 链接 颜色 .html 


01 <html> 

02 <head> 

03 <title> 使 用 标签 属性 修改 文本 链接 颜色 </title> 
04 </head> 

05 <body link=teal alink=red vlink=silver> 

06 <h3> 使 用 标签 属性 修改 文本 链接 颜色 </h3> 

07 <a href=" 后 退 .html"> 注 意 文本 颜色 前 后 变化 </a> 
08 </body> 

09 </html> 


【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 6.9 所 示 ， 链 接 的 文本 前 后 的 颜色 发 生 了 改变 。 


一 ， 说 明 : 当 页 面 被 访问 过 后 ， 再 次 打开 页 面 时 ， 会 发 现 链接 始终 保持 访问 后 的 状态 ， 这 是 因 
为 浏览 器 记录 了 用 户 的 链接 记录 。 如 果 想 删除 记录 信息 ， 可 以 在 浏览 器 中 选择 “工具 ”|“Internet 选项 ” 
命令 ， 在 弹出 的 “Internet 选项 ”对 话 框 中 单 击 “ 清 除 历史 记录 ”按钮 即 可 清除 记录 信息 。 
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图 6.9 使 用 标签 属性 修改 文本 链接 颜色 
【深入 学 习 】 这 里 是 使 用 HTML 标签 属性 来 实现 的 功能 ， 事 实 上 这 种 旧 方法 并 不 值得 推荐 ， 更 好 
的 方法 是 使 用 CSS。 除 了 结构 性 的 标签 无 法 替代 ， 如 <body>、<p>， 在 表现 性 的 作用 上 ， 应 该 习惯 于 
避免 使 用 标签 属性 的 用 法 。 而 且 CSS 可 以 包含 更 多 的 属性 修改 , 实现 自由 度 更 大 的 修饰 。 接 下 来 从 CSS 
的 角度 来 了 解 如 何 修改 链接 状态 。 

口 ”链接 还 未 被 访问 。 

alink {...} 

口 ”链接 被 选中 时 。 

a:active {...} 

口 ”鼠标 滑 过 链接 。 

a:hover {...} 

口 ”链接 被 访问 后 。 

avisited {...} 

在 介 中 通常 添加 两 个 基本 的 属性 : color 属性 修改 文本 的 颜色 , text-decoration 选择 是 否 显 示 下 划 线 。 
比较 常见 的 用 法 是 ， 设 置 未 访问 前 的 状态 、 设 置 被 访问 后 的 状态 和 设置 划 过 鼠标 链接 的 状态 。 所 以 ， 
一 个 基本 的 使 用 CSS 样式 表 如 程序 6.9 所 示 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 6 章 \6-9 使 用 CSS 属性 修改 文本 链接 颜色 .html】 
【实例 6-9】 使 用 CSS 属性 修改 文本 链接 颜色 ， 其 源码 展示 如 下 : 


程序 6.9 使 用 CSS 属 性 修改 文本 链接 颜色 .html 


01 <html> 

02 <head> 

03 <title> 使 用 CSS 属性 修改 文本 链接 颜色 </title> 

04 <style type=text/css> 

05 a {color-:teal; 

06 text-decoration:none /| 链接 的 状态 ， 去 除 链接 的 下 划 线 
07 二 

08 a:visited {color:silver; 
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text-decoration:none // 被 访问 后 的 链接 状态 


} 
a:hover {color:red; 
text-decoration:underline 。” // 划 过 链接 文本 的 样式 
} 
</style> 
</head> 
<body> 


<h3> 使 用 CSS 属性 修改 文本 链接 颜色 </h3> 
<a href=" 后 退 .html"> 注 意 文本 颜色 前 后 变化 </a> 
</body> 
</html> 
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【运行 程序 】 浏 览 该 页 面 ， 其 效果 如 图 6.10 所 示 ， 单 击 前 的 状态 是 墨绿 色 ， 被 访问 之 后 就 成 了 银 
灰色 ， 而 当 鼠 标 划 过 链接 文本 时 ， 显 示 的 状态 是 红色 带 有 下 划 线 的 文本 。 


使 用 CSS 属 性 修改 文本 错 按 是 色 使 用 CSS 属 性 修改 文本 错 按 喜人 
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图 6.10 使 用 CSS 属性 修改 文本 链接 颜色 


6.3.2 ”奇妙 特殊 的 链接 方式 


6.3.1 小 节 中 了 解 了 通过 使 用 CSS 的 方法 可 以 去 除 链接 默认 的 下 划 线 。 本 节 中 将 介绍 两 种 新 的 方法 
来 改变 下 划 线 的 样式 。 首 先 需要 了 解 两 个 属性 : border-bottom 属性 和 padding-bottom 属性 。 前 者 的 意 
思 是 底部 边界 ， 后 者 的 意思 是 底部 内 边 。 顾 名 思 义 ， 它 们 都 是 用 来 描述 边框 性 质 的 属性 。 那 么 ， 这 里 
的 原理 就 是 使 用 边框 属性 来 替换 原来 的 下 划 线 。 如 程序 6.10 展示 了 这 两 个 属性 的 作用 。 

【本 节 示 例 参 考 : 资料 光盘 \ 第 6 章 \6-10 ”使 用 border-bottom 属性 替换 链接 下 划 线 .html】 


【实例 6-10】 使 用 border-bottom 属性 替换 链接 下 划 线 ， 其 源码 展示 如 下 : 


程序 6.10 ”使 用 border-bottom 属 性 替换 链接 下 划 线 .html 


<html> 
<head> 
<title> 特 殊 的 链接 方式 </title> 
<style type=text/css> 
af 
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06 text-decoration: none: 

07 border-bottom: 5px dotted red; /改变 下 划 线 的 样式 

08 nD 

09 </style> 

10 </head> 

11 <body> 

12 <h3> 点 状 的 下 划 线 

13 <p><h3><a href=" 后 退 .htmI"> 使 用 “border-bottom” 属 性 替换 链接 下 划 线 </a> 
14 </body> 

15 </html> 


【运行 程序 】 如 代码 中 第 7 行 的 意思 是 “大 小 是 5px 的 点 状 红色 底部 边框 ”。 所 以 不 难 发 现 ， 这 
里 是 通过 大 小 、 形 状 和 颜色 来 控制 边框 的 形态 ， 如 图 6.11 所 示 。 


Nr EB 
IM) Wr) HE FRA TAT WO " 
9 © BO Pe ODF:UE ™ 

or A FX DOW a" 
点 状 的 下 划 线 


使 用 “border-bottom” 属 性 蔡 换 链接 下 划 线 


la 1 
图 6.11 点 状 的 下 划 线 

【深入 学 习 】 这 里 的 dotted 是 点 状 的 意思 ， 除 此 之 外 ，CSS 中 还 允许 其 他 形状 的 下 划 线 。 其 他 的 
还 有 dashed〈 虚 线 ) 、double〈 双 线 ) 、groove( 横 线 ) 、ridge (将 线 ) 、inset (内 陷 ) 、outset (外 
陷 ) ， 有 兴趣 的 读者 可 以 尝试 一 下 。 

padding-bottom 属性 的 作用 可 以 引用 自 定义 图 像 来 制定 下 划 线 , 技巧 在 于 要 排版 好 下 划 线 和 文本 的 
距离 ， 如 程序 6.11 设计 的 自 定义 下 划 线 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 6 章 \6-11 使 用 padding-bottom 属性 替换 链接 下 划 线 .html】 

【实例 6-11】 使 用 padding-bottom 属性 替换 链接 下 划 线 ， 其 源码 展示 如 下 : 


程序 6.11 使 用 “padding-bottom” 属 性 替换 链接 下 划 线 .html 


01 <html> 

02 <head> 

03 <title> 特 殊 的 链接 方式 </title> 

04 <style type=text/css> 

05 af 

06 text-decoration: none; /| 去 除 下 划 线 

07 padding-bottom: 15px; /设置 底 边 边界 的 位 置 
08 background: url( 图 片 / 手 .png) bottom repeat-x; /车 换 为 自 定义 的 图 像 
09 } 

10 </style> 

11 </head> 

从 <body> 
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13 <h3> 使 用 自 定义 图 像 的 下 划 线 

14 <p><h3><a href=" 后 退 .html"> 使 用 “padding-bottom” 属 性 替换 链接 下 划 线 </a> 
15 </body> 

16 </html> 


【运行 程序 】 浏 览 该 页 面 ， 在 浏览 器 中 的 结果 如 图 6.12 所 示 。 


使 用 自 定义 图 像 的 下 划 线 


使 用 “padding-bottom” 属 性 替换 链接 下 划 线 
550595500 
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图 6.12 使 用 padding-bottom 属性 替换 链接 下 划 线 


注意 : 需要 用 心 不 断 调整 图 像 的 位 置 才 能 设置 好 下 划 线 ， 但 是 在 不 同 的 浏览 器 中 可 能 会 产 
生 不 同 的 结果 ， 所 以 最 好 不 要 这 样 设置 下 划 线 。 


【深入 学 习 】 代 码 第 7 行 中 控制 了 自 定义 的 下 划 线 和 文本 的 距离 ， 这 个 距离 需要 仔细 控制 ， 如 果 
这 个 距离 控制 不 当 , 在 页 面 中 会 显示 不 完整 图 像 或 者 显示 不 出 自 定义 下 划 线 。 代 码 第 8 行 的 意思 是 “图 
像 在 x 方 向 上 重复 的 内 边框 ”， 而 使 用 的 这 个 图 像 是 “ 手 .png”。 当 然 ， 在 正规 的 网 页 设计 中 ， 最 好 不 
要 这 么 做 ， 因 为 这 样 会 让 使 用 者 觉得 很 不 自在 。 


6.3.3 ”热点 图 像 区 域 的 链接 


所 谓 图 像 热点 区 域 ， 就 是 指 一 个 图 像 中 的 某 一 区 域 ， 那 么 热点 图 像 区 域 的 链接 ， 自 然 就 是 使 用 这 
个 区 域 作为 超 链接 ， 就 好 像 在 一 张 地 图 上 ， 以 其 中 某 一 区 域 作 为 超 链接 。 所 以 ， 在 代码 中 也 用 到 一 个 
形象 的 标签 一 一 <map> 标 签 。<map> 标 签 下 ， 嵌 入 使 用 <area> 标 签 表 明 某 一 区 域 ， 其 中 有 3 个 属性 值 来 
确定 这 个 区 域 ， 分 别 是 shape 属性 、coords 属性 和 href 属性 。 
口 ”shape 属性 : 用 来 确定 选区 的 形状 ， 分 别 是 rect (矩形)、circle〈 圆 形 ) 和 poly (多 边 形 )。 
口 coords 属性 : 用 来 控制 形状 的 位 置 ， 通 过 坐标 来 找到 这 个 位 置 。 一 般 来 说 ， 在 实际 操作 中 ， 
设计 者 都 会 选择 借助 可 视 化 的 编辑 页 面 的 软件 来 实现 这 一 功能 ， 这 就 省 却 了 花费 很 多 心思 在 
图 像 上 测算 具体 的 坐标 值 。 
口 href 属性 : 就 是 超 链接 。 
所 以 ,将 这 些 属性 运用 在 一 起 ， 这 种 方法 的 具体 代码 如 下 : 
<map id=...> 
<area shape="..." coords="..." href="..."> 
</map> 
这 里 介绍 一 种 借助 Dreamweaver 软件 来 制作 热点 图 像 链 接 的 实例 。Dreamweaver 的 工作 界面 如 
图 6.13 所 示 。 
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选择 不 同 的 形状 制作 热点 区 域 


图 6.13 ”Dreamweaver 中 制作 热点 区 域 


在 Dreamweaver 标准 工作 界面 中 ， 上 部 分 是 代码 区 ， 可 以 在 这 里 写 代 码 ， 中 间 是 预览 页 面 的 地 方 ， 
最 下 面 是 修改 一 些 属性 值 的 面板 ， 右 侧 是 一 系列 不 同 的 工作 面板 。 在 这 里 并 不 需要 使 用 到 。 当 使 用 代 
码 在 页 面 中 置 入 图 像 以 后 ， 在 图 6.13 中 的 左下 角 单 击 线 框 中 的 图 形 按钮 ，Dreamweaver 中 便 直 观 地 表 
示 了 不 同形 状 热点 区 域 的 图 标 。 选 中 后 ， 在 预览 页 面 区 域 中 的 图 像 上 绘制 需要 的 形状 并 放置 在 需要 的 
位 置 。 设 置 好 以 后 ， 代 码 区 域 会 自动 生成 <map> 标 签 ， 这 里 要 修改 两 个 属性 。 这 时 在 代码 区 域 中 可 以 
看 到 如 下 代码 : 
01<img src= 图 片 /向 左 向 右 .jpg / usemap="#Map"> 
02 <mapid="Map"> 
03 <area shape="circle" coords="303,265,86" href="#" /> 
04 </map> 
在 这 个 默认 的 代码 中 ， 第 2 行 中 id 属性 下 为 Map， 这 个 名 字 可 以 自行 去 定义 。 注 意 在 第 1 行 中 ， 
引用 了 这 个 命名 为 Map 的 热点 区 域 链接 。 而 在 第 3 行 的 <area> 标 签 中 ，shape 和 coords 属性 已 经 自动 
生成 。 在 这 个 例子 中 ， 表 示 为 圆 形 的 选区 ， 位 置 定义 在 “303，265” 的 坐标 位 置 上 ， 尾 数 86 代表 的 是 
这 个 圆 的 半径 值 ， 这 个 数值 控制 圆 面积 的 大 小 。 完 整 的 页 面 源码 如 程序 6.12 所 示 。 
【本 节 示 例 参考 ， 资 料 光盘 \ 第 6 章 \6-12 ”借助 Dreamweaver 软件 来 制作 热点 图 像 链接 .html】 
【实例 6-12】 借 助 Dreamweaver 软件 来 制作 热点 图 像 链接 ， 其 源码 展示 如 下 : 


程序 6.12 ”借助 Dreamweaver 软 件 来 制作 热点 图 像 链接 .html 


01 <html> 

02 <head> 

03 <title> 借 助 Dreamweaver 软件 来 制作 热点 图 像 链接 </title> 

04 </head> 

05 <body> 

06 <img src= 图 片 /向 左 向 右 .jpg border="0" / usemap=#Map> 

07 <map name="Map"> 

08 <area shape="circle" coords="305,266,43" href=" 后 退 .html" /> 
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<area shape="rect" coords="246,105,298,135" href=" 后 退 .html"> 
<area shape="rect" coords="264,44,293,74" href=" 后 退 .html"> 
<area shape="rect" coords="243,16,260,51" href=" 后 退 .html"> 
<area shape="rect" coords="23,40,59,74" href=" 后 退 .html"> 
<area shape="rect" coords="13,98,59,120" href=" 后 退 .html"> 
<area shape="rect" coords="40,132,78,162" href=" 后 退 .html"> 
</map> 
</body> 
</html> 


【运行 程序 】 这 个 页 面 在 浏览 器 中 的 结果 如 图 6.14 所 示 。 


Pr ee ee 证 


Ta i 
= IA 


图 6.14 热点 区 域 链接 


6.4 在 新 窗口 中 显示 链接 窗口 


在 先前 的 所 有 链接 中 ， 页 面 都 是 在 同一 页 面 中 跳 转 ， 有 时 设计 者 希望 链接 的 页 面 在 新 的 窗口 中 打 
开 , 这 时 只 要 在 <a> 标 签 中 添加 “target=_blank” 即 可 .程序 6.13 表现 的 是 在 新 窗口 中 弹出 页 面 的 方 


法 。 


【本 节 示 例 参考 : 资料 光盘 \ 第 6 章 \6-13 ”在 新 窗口 中 跳出 链接 窗口 .html】 
【实例 6-13】 在 新 窗口 中 跳出 链接 窗口 的 方法 ， 其 源码 展示 如 下 : 


程序 6.13 在 新 窗口 中 跳出 链接 窗口 .html 


<html> 
<head> 
<title> 新 窗口 显示 链接 窗口 </title> 
</head> 


<body> 
<a href=" 后 退 .html” target=_blank> 新 窗口 显示 链接 窗口 </a> 


</html> 
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【运行 程序 】 这 个 页 面 在 浏览 器 中 的 结果 如 图 6.15 显示 。 
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图 6.15 在 新 窗口 中 强 出 链接 窗口 
6.5 案例 : 制作 普通 链接 的 主页 


在 网 页 上 经 常 遇 到 这 样 的 链接 功能 ， 一 个 主页 上 罗列 很 多 名 词 条 目 ， 每 个 条 目 链接 着 一 个 页 面 ， 
用 来 为 专门 的 链接 条 目 服务 。 下 面 的 例子 中 介绍 了 美国 电影 史上 票房 最 高 的 前 30 名 电影 。 目 前 为 止 ， 
泰坦 尼克 号 依然 排 位 第 一 ， 这 里 就 以 它 为 一 个 目录 ， 运 用 各 种 链接 方式 。 如 程序 6.14、 程 序 6.15 展示 
了 这 个 例子 ， 类 似 的 信息 导航 的 页 面 有 很 多 ， 通 过 这 个 引子 来 达到 抛砖引玉 的 作用 。 

【本 节 示 例 参考 :资料 光盘 \ 第 6 章 \6-14 主页 :电影 30 目录 .html 6-15 子 页 面 :泰坦 尼克 号 .html】 

【实例 6-14】 主 页 : 一 个 简单 的 电影 目录 展示 ， 其 源码 展示 如 下 : 


程序 6.14 主页 
01 <!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" 
02 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
03 <html xmlns="http://www.w3.org/1999/xhtml"> 
04 <head> 
05 <style type=text/css> 
06 a {color:teal; // 设 置 未 访问 时 的 链接 颜色 
07 text-decoration:none /去 除 链接 下 划 线 
08 } 
09 avisited {color:silver; /设置 访问 后 的 链接 颜色 
10 text-decoration:none 
11 } 
12 a:hover {color:red; // 设 置 鼠标 滑 过 链接 时 的 颜色 
13 text-decoration:underline 
14 pn 
bi </style> 
16 <! 一 使 用 样式 表 来 修改 页 面 链 接 状 态 一 > 
17 <title> 制 作 普 通 链 接 的 主页 </title> 
18 </head> 
49 <body> 
20 <h3>Imdb 电影 评分 排名 </h3> 
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21 <p> 
2 <a href=#1-10>1-10</a>&nbsp: /设置 页 面 的 链接 
23 <a href=#11-20>11-20</a>&nbsp; 
24 <a href=#21-30>21-30</a> 
25 </p> 
26 <br><hr> 
2 <p> 
28 <a id="1-10"><a href="6-15 泰坦 尼克 号 .html"> // 设 置 页 面 的 锚 点 
29 1. ” 铁 达 尼 号 (1997)</a></a><br /> 
0 
31 </p> 
32 <p> 
33 <a id="11-20">11. 蜘蛛 侠 2 (2004)</a> <br /> 
< 
35 </p> 
36 <p> 
37 <a id="21-30">21. Iron Man (2008)</a> <br /> 
3S8 
39 </body> 
40 </html> 

【实例 6-15】 子 页 面 : 泰坦 尼克 号 ， 其 源码 展示 如 下 : 

程序 6.15 子 页 面 

01 <!IDOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" 
02 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
03 <html xmlns="http://www.w3.org/1999/xhtml"> 
04 <head> 
05 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
06 <title> 子 页 
07 </title> 
08 </head> 
09 <body> 
10 <p> 英 文 名 : Titanic</p> 
11 <p><img src=" 图 片 / 铁 达 尼 克 .jpg" width="97" height="140" /></p> 
12 <pP> 中 文 名 : 泰坦 尼克 号 <br /> 
I 
14 <p>【 剧 情 简介 】 <br /> 
15 为 了 寻找 1912 年 在 大 西洋 沉没 的 泰坦 尼克 号 和 船上 的 珍贵 财宝 -一 价值 连城 的 “ 海 
1 
17 <p><a href="6-14 主页 .html"><img src=" 图 片 /返回 主页 .bmp" 
18 border=0/></a></p> 
19 </body> 
20 </html> 


【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 6.16 所 示 。 
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既然 是 页 面 链接 ， 首 先 必须 是 在 两 个 以 上 的 页 面 之 间 互 动 。 这 个 例子 中 使 用 主页 来 罗列 目录 ， 如 
程序 6.14 所 示 ， 并 且 制 作 其 中 一 个 目录 的 子 页 ， 如 程序 6.15 所 示 。 如 果 单 击 “ 主 页 ”中 “1~10”、 
“11 一 20” 或 者 “21 一 30” 选 项 ， 页 面 会 根据 错 点 位 置 ， 自 动 找到 同 页 面 中 相对 应 的 内 容 ， 如 图 6.17 
所 示 。 单 击 “ 主 页 ”中 排 位 第 一 的 “1. 铁 达 尼 号 1997) ”时 ， 页 面 跳 转 到 子 页 “泰坦 尼克 号 ”， 在 
子 页 面 下 方 的 左边 有 个 “小 房子 ”图 像 ， 其 作用 是 用 来 链接 回 主页 。 


图 6.16 页面 跳 转 到 锚 点 位 置 图 6.17 子 页 链接 回 主页 

在 这 个 例子 中 ， 需 要 注意 链接 状态 的 设置 ， 如 程序 6.14 中 ,第 6 一 14 行 ， 以 及 程序 6.14 中 同 页 面 
内 文本 链接 的 设置 和 对 “1. 铁 达 尼 号 (1997) ”设置 的 超 链接 ， 而 在 程序 6.15 中 ， 注 意 第 18 行 代码 ， 
如 何 去 除 图 像 边 框 ， 并 使 用 图 像 链接 回 主页 的 技巧 。 


注意 : 第 6 一 14 行使 用 的 是 CSS 样式 表 来 修饰 链接 状态 ， 在 第 7 章 中 有 详细 的 介绍 。 在 


图 6.17 中 由 于 主页 的 链接 已 经 是 被 访问 过 的 状态 ， 所 以 呈现 出 设 定好 的 灰色 。 


6.6 小 结 


本 章 介 绍 了 超 链接 这 一 互联 网 中 最 具 特 色 的 技巧 ， 这 些 技巧 始终 围绕 在 一 个 标签 一 一 <a> 标 签 展 
开 。 但 其 展现 出 的 形式 却 是 多 种 多 样 ， 说 明了 超 链接 是 人 性 化 设计 的 一 门 技术 ， 其 变化 非常 多 。 本 章 
主要 的 知识 点 有 : 

口 ” 超 链接 的 概念 ， 以 及 如 何 确定 链接 地 址 放置 页 面 文件 。 

口 基本 的 文本 链接 和 图 像 链接 。 

口 ”链接 到 邮箱 。 

口 使 用 id 属 性 的 超 链接 ， 可 以 实现 同一 页 面 内 的 跳 转 。 
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口 


先 6 剖 网 页 全 二 


使 用 CSS 修饰 链接 的 状态 。 

使 用 自 定义 图 形 和 图 像 修 改 链接 的 下 划 线 。 
借助 软件 Dreamweaver 制作 图 像 热 点 区 域 链接 。 
在 新 窗口 中 跳出 链接 页 面 。 


本 章 最 后 通过 一 个 综合 的 例子 表现 了 超 链接 的 设置 是 一 门 自由 的 艺术 。 如 果 设 计 者 愿意 ， 可 以 将 
链接 放 在 页 面 中 的 任何 地 方 ， 但 是 不 要 忘记 ， 提 供 友好 、 便 捷 的 链接 才 是 最 重要 的 。 在 第 7 章 中 将 介 
绍 CSS 的 使 用 规则 ， 通 过 CSS 样式 表 ， 可 以 帮助 设计 者 实现 更 多 优秀 的 页 面 效果 。 
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对 于 设计 者 来 说 ， 总 是 希望 能 够 在 页 面 中 自由 发 挥 创 意 ， 实 现 自己 的 想法 。 然 而 ，HTML 语言 
的 很 多 标签 都 存在 很 大 的 局 限 性 ， 如 <hl> 标 签 定义 的 标题 ， 始 终 是 定义 为 较 大 的 字体 的 文本 ， 不 会 改 
变 ， 所 以 在 没有 CSS 以 前 ， 设 计 者 不 得 不 借助 其 他 标签 来 补充 标签 的 属性 。 而 CSS 是 什么 ? CSS 就 是 
一 个 无 所 不 能 的 巨大 的 “属性 集 ”。 

从 本 章 开 始 ， 读 者 要 尽量 忘记 原来 标签 的 定式 。 例 如 ， 虽 然 <h1> 标 签 依然 常 被 用 来 定义 标题 ， 但 
这 是 因为 人 们 习惯 于 这 样 使 用 , 而 <hl> 标 签 表现 出 来 的 样式 却 并 非 一 成 不 变 的 , 当 设计 者 使 用 CSS 时 ， 
他 们 可 以 令 <h1> 标 签 内 的 文本 变 成 任何 他 们 想 要 的 样子 。 本 章 的 知识 点 如 下 。 
学 习 CSS 样式 表 的 写法 规则 。 
理解 选择 器 以 及 它 的 写法 。 
选择 器 的 多 种 样式 及 它们 的 作用 。 
使 用 CSS 样式 表 的 3 种 方式 ， 如 行内 CSS、 顽 入 式 CSS 和 外 联 式 CSS。 
使 用 CSS 样式 表 编 辑 页 面 。 
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7.1 如 何 学 习 CSS 


CSS 常 被 翻译 为 “级 联 样式 表 ”， 如 果 现 在 还 不 理解 “级 联 ” 是 什么 概念 ， 那 么 可 以 从 Cascading 
一 词 的 本 意 来 理解 。 其 有 “小 瀑布 , 瀑布 状 的 ”意思 , 不 妨 把 CSS 形象 地 理解 为 “瀑布 一 样 的 样式 表 ”， 
一 个 CSS 看 上 去 是 这 样 的 : 


body{ 
font-family: 黑体 ; /字体 样式 
font-size: 80%; /字体 大 小 
color black; /字体 颜色 
background-colorblue; /| 背景 颜色 
margin: 1em; /在 页 面 中 的 定位 
padding: 0; /设置 空 距 为 0 
出 


大 括号 中 是 一 排 属性 值 的 描述 ， 这 样 看 上 去 是 不 是 有 些 像 瀑布 状 ? 其 实 ，CSS 并 不 神秘 ， 页 面 中 ， 
使 用 属性 标签 来 修饰 页 面 内 容 的 表现 。 而 CSS 的 作用 正 是 用 来 修饰 页 面 内 容 的 表现 形式 的 ， 所 以 CSS 
本 身 就 是 一 个 “属性 集 ”， 只 不 过 这 个 属性 可 以 由 设计 者 自 定义 ， 可 以 无 限 扩展 。 

事实 上 ，“ 级 联 ” 指 的 是 CSS 样式 的 继承 性 ， 在 本 章 后 面 的 内 容 中 会 体现 出 这 一 点 。CSS 样式 表 
有 它 自身 的 一 定 使 用 规则 ， 这 里 通过 一 个 简单 的 例子 感受 一 下 CSS， 如 程序 7.1 所 示 为 一 个 简单 导 
航 栏 。 
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【本 节 示 例 参考 : 资料 光盘 \ 第 7 章 \7-1 CSS 的 使 用 .html】 
【实例 7-1】CSS 的 使 用 ， 其 源码 展示 如 下 : 
程序 7.1 CSS 的 使 用 .html 


01 <html> 

02 <head> 

03 <title> 使 用 CSS 修饰 导航 栏 </title> 
04 <style> 

21 </style> 

D2 </head> 
23 <body> 

24 <div id="header"> 

25 <h1> 导 航 栏 </h1> 

26 <ul> 

27 <li><a href="#'> 目 录 1</a></li> 
28 <li ><a href=" 娄 > 目录 2</a></li> 
29 <li><a href="#'> 目 录 3</a></li> 
30 <li><a href="#'> 目 录 4</a></li> 
31 

32 

33 <div id="content"> 

34 <p> 使 用 CSS 修饰 导航 栏 </p> 
35 </div> 

36 </body> 

37 </html> 


【运行 程序 】 代 码 中 缺少 了 第 5 一 20 行 , 这 部 分 即 CSS 样式 表 定 义 部 分 。 本 例 中 先 把 这 部 分 拿 去 ， 
然后 一 步 步 地 将 CSS 样式 表 填 入 ， 以 观察 CSS 带 来 的 变化 。 其 中 ，<div> 的 作用 是 用 来 封装 CSS 样式 
表 的 ， 本 书 将 在 后 面 的 章节 中 学 习 ， 缺 少 CSS 的 这 段 代码 其 结果 如 图 7.1 所 示 。 


说 明 : 本 例 用 来 展示 CSS 的 效果 ， 读 者 可 以 不 必 在 意 <div> 标 签 所 起 的 作用 。 


正如 本 书 在 前 面 章节 中 介绍 的 知识 一 样 ， 这 是 一 个 普通 的 具备 链接 的 列表 。 接 着 在 原先 的 代码 中 
补 全 第 5 一 9 行 代 码 。 而 这 几 行 代码 就 是 一 个 简单 的 样式 表 ， 这 个 样式 表 中 集合 了 3 个 属性 ， 当 补 全 到 
原来 的 代码 中 后 页 面 变 为 如 图 7.2 所 示 ， 导 航 栏 的 列表 符号 被 去 除了 。 


05 #header UI{ 

06 list-style: none; 。 /去除 导 航 栏 的 列表 符号 
07 padding:0; // 定 位 页 面 的 位 置 

08 margin:0; 

09 } 
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原来 ， 这 段 代 码 是 用 来 去 除 列表 符号 的 ， 由 “list-style: none;” 这 一 属性 中 便 可 以 看 出 来 了 。 接 着 
补 全 代码 中 的 第 10 一 15 行 。 保 存 后 重新 打开 这 个 页 面 ， 浏 览 器 中 新 的 结果 如 图 7.3 所 示 。 


10 #header li{ 

11 display: inline; /以 行内 形式 展示 列表 
12 border solid; /定义 边框 的 样式 

13 border-width: 1px 1px 0 1px; /定义 边框 的 粗细 

14 margin: 0 0.5em 0 0; /定义 其 在 页 面 中 的 位 置 
15 . 


这 儿 句 代码 又 是 用 来 改变 列表 的 排列 方式 , 比 起 原先 的 页 面 , 已 经 发 生 了 很 大 的 改变 。 这 里 的 CSS 
样式 表 和 先前 的 相 比 ， 格 式 类 同 ， 改 变 的 只 是 大 括号 中 的 属性 。 


注意 : 这 个 样式 表 的 命名 是 header li。 这 和 <body> 标 签 中 的 <li> 又 有 什么 关联 呢 ? 本 章 会 


在 后 面 的 内 容 中 有 所 解释 。 


图 7.3 中 的 导航 栏 边框 显得 有 些 紧凑 ， 而 通过 CSS 能 够 很 容易 地 改变 边框 的 大 小 ， 这 就 需要 用 到 
padding 属性 。 其 是 一 个 使 用 频 度 非常 高 的 属性 , 作用 是 在 一 个 声明 中 设置 元 素 的 内 边 距 属性 。 在 这 里 ， 
给 原来 的 代码 补 上 第 16 一 18 行 。 最 终 在 浏览 器 中 更 新 的 效果 如 图 7.4 所 示 。 

16 #header lia{ 


17 padding: 0 1em; /定义 导航 栏 文本 的 链接 
18 } 
mr) mii) a WR TA = 
ca 日 -四 国名 万 转 宙 rr 加 | 全 -总 
I TT 广 主 文臣 and OY We" 
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EL | EE |] Ei: | Ea ] EE EE EE EX 
使 用 CS 修饰 导航 栏 使 用 CSS 修 饰 导航 栏 
EE 7 品 Rm 
图 7.3 横向 排列 导航 目录 图 7.4 改变 目录 栏 边框 大 小 
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当 导航 栏 完成 以 后 ， 接 下 来 给 页 面 中 的 文本 “使 用 CSS 修饰 导航 栏 ”添加 边框 ， 这 在 HTML 标签 
中 只 能 通过 表格 来 实现 ， 而 且 很 麻烦 。 使 用 CSS 样式 表 ， 只 需要 再 加 以 下 两 句 代码 : 


19 #content { border 1px solid; /定义 边框 的 样式 
20 } 


最 后 ， 整 个 页 面 就 填补 完成 了 ， 如 图 7.5 所 示 是 最 终 页 面 的 效果 。 


L_][ HR |[ BR |[ HR ee 
使 用 css 修志 导航 栏 


图 7.5 给 文本 添加 边框 


【深入 学 习 】 不 难 发 现 ， 使 用 CSS 时 ， 原 则 是 “ 先 定 义 ， 再 使 用 ”。CSS 样式 表 的 作用 是 用 来 表 
现 页 面 ， 其 可 以 令 页 面 发 生 翻天 攻 地 的 变化 ， 而 HTML 只 需要 完成 构建 基础 的 页 面 结构 。 

在 这 个 例子 中 , CSS 的 样式 表 都 是 放 在 <head> 标 签 内 的 , 注意 样式 表 的 定义 规则 。 例如 , #header ul 
是 如 何 和 HTML 标签 相关 联 的 ， 这 其 中 有 两 个 核心 的 问题 ， 即 如 何 定义 CSS 样式 表 和 如 何 使 用 CSS 
样式 表 。 那 么 围绕 这 两 个 问题 ， 本 章 将 详细 介绍 CSS 的 使 用 规则 。 


7.2 CSS 基本 的 规则 写法 


CSS 已 经 发 展 很 多 年 了 ， 但 是 直到 前 两 年 ，CSS 才 得 以 实现 所 有 网 页 浏览 器 的 支持 。 至 今 ，CSS 
已 经 形成 了 自己 的 一 套 语 法 ， 这 套 语法 由 一 些 标志 构成 ， 简 单 地 说 ， 就 是 一 个 基本 的 样式 表 由 选择 器 、 
属性 和 属性 值 构成 。 


7.2.1 基本 的 样式 表 的 写法 


CSS 样式 表 也 有 属于 自己 的 写法 规则 ， 在 特定 的 规则 下 编写 ， 才 可 以 使 之 生效 ， 一 个 标准 的 CSS 

写法 是 这 样 的 ， 例 如 : 
h1 { 

font-family: 黑 体 ; 

} 

hl: 表示 选择 符 。 

font-family: 是 属性 ， 这 里 表示 的 是 定义 字体 。 

黑体 : 是 属性 值 。 这 里 表示 定义 的 字体 为 黑体 字 。 

“font-family: 黑 体 ;” 将 属性 和 属性 值 结合 在 一 起 ， 这 样 的 形式 称 之 为 声明 语句 。 声 明 语 句 可 以 有 
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很 多 句 ， 所 有 的 声明 语句 都 要 放 在 “{}” 内 。 

| Tt 注意 : 声明 语句 的 结尾 不 能 遗漏 分 号 “;”。 

hl { font-family: 黑 体 ; } 归 结 起 来 ， 就 是 一 个 基本 的 CSS 样式 表 。 

CSS 样式 表 的 引用 需要 放 在 <style> 标 签 中 声明 。 
7.2.2 ”使 用 类 class 和 标志 id 链接 样式 表 

一 个 定义 好 的 样式 表 , 需要 通过 类 class 和 标志 id 来 定位 它 所 作用 的 页 面 内 容 。 id 标志 在 同 页 面 中 
可 以 实现 链接 (参见 第 6 章 ) ， 作 用 相当 于 在 页 面 中 定位 一 个 锚 点 。id 在 链接 CSS 属性 表 时 ， 所 起 到 
的 作用 也 是 一 样 的 ， 而 类 似 这 样 作用 的 还 有 类 class。 类 class 和 标志 id 之 间 是 有 区 别 的 ， 如 程序 7.2 
所 示 为 类 选择 器 和 标志 选择 器 的 对 比 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 7 章 \7-2 ”类 选择 器 和 标志 选择 器 .html】 

【实例 7-2】 类 选择 器 和 标志 选择 器 ， 其 源码 展示 如 下 : 

程序 7.2 类 选择 器 和 标志 选择 器 .html 


01 <html> 

02 <head> 

03 <title> 类 选择 器 和 标志 选择 器 </title> 

04 <style type="text/css"> 

05 .style1 {color: red; // 这 是 class 选择 器 的 定义 样式 
06 font-size:16px; 

07 } 

08 #style2 {color: blue; // 这 是 id 选择 器 的 定义 样式 
09 font-size:16px:; 

10 } 

11 </style> 

12 </head> 

13 <body> 

14 <h3 class="style1"> 使 用 class 选择 器 的 红色 字体 </h1> 
15 <h3 class="style2"> 使 用 class 选择 器 的 红色 字体 </h1> 
16 <h2 id="style1"> 使 用 id 选择 器 的 蓝 色 字体 </h2> 

17 <h2 id="style2"> 使 用 id 选择 器 的 蓝 色 字体 </h2> 

18 </body> 

19 </html> 


【运行 程序 】 该 例子 中 展示 了 类 class 和 标志 id 是 如 何 调用 CSS 样式 表 作 用 于 HTML 页 面 的 ， 结 
果 如 图 7.6 所 示 。 此 外 ， 类 class 和 标志 id 之 间 在 调用 功能 上 也 不 同 ，class 可 被 用 于 多 个 对 象 ， 需 要 被 
设 定 成 同 种 CSS 样式 的 情况 ， 假 如 这 样 写 : 
<h2 class="style1"> 
<h3 class="style1"> 
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这 种 写法 是 正确 的 。 但 如 果 是 id 选择 器 ， 则 只 能 用 于 一 个 对 象 。 所 以 不 能 这 样 写 : 


<h2 id="style2"> 
<h3 id="style2"> 
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使 用 class 选择 器 的 红色 字体 

使 用 class 选 择 器 的 红色 字体 
使 用 id 选择 器 的 蓝 色 字体 
使 用 id 选择 器 的 落 包 字体 


E27 PT 
图 7.6 选择 器 
【深入 学 习 】 从 图 中 可 以 看 出 ， 代 码 中 第 14 行 和 第 17 行 成 功 调用 了 CSS 样式 表 ， 而 第 15 行 代 
码 和 第 16 行 代码 的 运用 是 不 起 作用 的 。 所 以 ， 从 这 个 对 比 中 可 以 看 到 ，class 选择 器 和 id 选择 器 使 用 
的 方式 是 不 同 的 。 
7.2.3 创建 选择 器 


选择 器 指定 了 样式 将 被 应 用 于 页 面 中 的 哪些 内 容 , 主要 有 3 种 基本 选择 器 : HTML 选择 器 (HTML 
selector) 、id 选择 器 (id selector) 和 class 选择 器 (class selector) 。 通 过 这 些 基本 的 选择 器 ，HTML 
选择 器 可 以 延伸 出 派生 选择 器 ， 而 多 种 基本 选择 器 混合 使 用 时 则 定义 为 分 组 选择 器 。 此 外 ， 还 有 一 种 
特殊 的 伪 类 选择 器 。 在 本 节 中 ， 将 介绍 这 6 种 选择 器 。 

1. HTML 选择 器 

所 谓 HTML 选择 器 ， 其 实 就 是 重新 定义 HTML 表现 性 标签 的 样式 ， 正 如 文中 最 初 所 提 的 ，<hl> 
标签 内 的 文本 应 是 黑色 大 体 字 ， 而 当 通 过 重新 定义 之 后 ，<hl> 标 签 内 可 以 是 任何 样式 ， 如 程序 7.3 所 
示 为 如 何 将 <hl> 标 签 改变 成 一 个 选择 器 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 7 章 \7-3 HTML 选择 器 的 使 用 .html】 

【实例 7-3】HTML 选择 器 的 使 用 ， 其 源码 展示 如 下 : 


程序 7.3 ”HTML 选择 器 的 使 用 .html 


01 <html> 

02 <head> 

03 <title> HTML 选择 器 的 使 用 </title> 

04 <style type="text/css"> 

05 h1{ 

06 color#555555; /将 文本 颜色 改变 为 灰色 
07 font-size:2.3em; /改变 字体 大 小 

08 font-family: 微软 雅 黑 ; /改变 字体 样式 

09 
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10 </style> 

11 </head> 

12 <| 

和 <h1> HTML 选择 器 的 使 用 </h1> 
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wy 


图 7.7 HTML 选择 器 的 使 用 


【深入 学 习 】 结 果 表 明 ，<hl> 标 签 下 的 文本 已 经 不 再 是 传统 <h1> 标 签 显示 的 文本 ，CSS 具有 很 便 
捷 的 灵活 性 ， 可 以 修改 很 多 的 标签 。 
2. 派生 选择 器 
通过 依据 元 素 在 其 位 置 的 上 下 文 关系 来 定义 样式 ， 称 之 为 派生 选择 器 。 设 计 者 可 以 使 标记 更 加 简 
洁 ， 这 种 方式 很 好 地 体现 了 CSS 的 “级 联 ” 特 性 。 下 面 这 个 例子 使 用 了 两 个 标记 来 定义 CSS 样式 表 。 
hih2{ 
color:red; 
font-size:1em; 
font-family: 黑体 ; 


人 


在 写法 上 ， 在 上 级 对 象 hl 和 目标 对 象 h2 之 间 使 用 空格 来 指定 样式 ， 如 将 这 个 样式 表 添加 入 程 
序 7.3 的 <style> 标 签 中 ， 样 式 表 将 作用 于 <hl> 标 签 内 的 <h2> 标 签 中 的 对 象 ， 这 里 添加 以 下 儿 行 代码 来 
说 明 ， 如 在 程序 7.3 的 <body> 部 分 中 放 入 以 下 代码 : 

<h1> HTML 选择 器 的 使 用 </h1> 


<h2> HTML 选择 器 的 使 用 </h2> 
<h1><h2> HTML 选择 器 的 使 用 </h2></h1> 


其 结果 如 图 7.8 所 示 。 

所 以 在 HTML 样式 表 定义 时 ， 当 定义 “hl h2” 样 式 表 时 ， 所 起 作用 时 并 不 是 说 hl 和 h2 是 两 个 相 
同 的 CSS 样式 表 ， 而 是 被 看 作 一 个 整体 来 定义 。 所 以 在 页 面 中 ， 使 用 “<hl><h2>” 时 ， 是 作为 一 个 整 
体 出 现 的 。 因 此 ， 即 使 代码 写成 这 样 : 


注意 : “h1 h2” 和 “h1,h2” 的 含义 是 不 同 的 ， 将 在 后 面 的 分 组 选择 器 中 介绍 后 者 的 定义 。 
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<h1> 其 他 文本 内 容 <h2> HTML 选择 器 的 使 用 </h2> 其 他 文本 内 容 </h1> 
其 结果 如 图 7.9 所 示 。 


HTML 选 择 器 的 使 用 
HTML 选 择 器 的 使 用 于 他 文本 内 办 
HTML 选 择 器 的 使 用 | HTML 选 择 器 的 使 用 
i | 其 他 文本 内 容 
图 7.8 标签 符 的 级 联 一 图 7.9 标签 符 的 级 联 二 


只 要 是 在 “<hl><h2>” 形 式 内 的 文本 ， 无 论 <h1l> 和 <h2> 之 间 是 否 含有 其 他 页 面 内 容 ， 一 样 都 属于 
“<h1><h2>” 样 式 表 定义 的 范围 。 但 是 在 <h1> 标 签 中 的 文本 ， 依 然 只 受 限制 于 hl 样式 表 。 
3. id 选择 器 
id 选择 器 的 作用 就 是 通过 id 选择 器 将 CSS 样式 表 作 用 到 页 面 的 对 象 上 。 那么 这 个 样式 表 应 该 这 样 
在 选择 器 的 开头 处 加 上 “#” 符 号 。 下 面 有 这 样 一 个 样式 表 : 
#text {font-size:1em ;} 
将 这 个 样式 表 绑 定 到 HTML 对 象 上 时 ， 就 要 这 样 写 : 
<h1 id=#"text"> 文 本 内 容 </h1> 
而 id 选择 器 一 样 可 以 作为 派生 选择 器 ， 代 码 如 下 所 示 : 
#text p {color: blue } 
这 样 ， 表 明 样式 表 将 只 作用 于 text 对 象 中 所 有 标签 下 的 内 容 。 这 和 HTML 样式 表 的 堪 套 原则 是 
一 样 的 。 

4. class 选择 器 

如 果 希 望 通过 class 选择 器 将 样式 表 固 定 到 HTML 页 面 对 象 ， 那 么 样式 表 的 写法 应 该 是 在 选择 器 
的 开头 处 加 上 “.” 符 号 ， 例 如 : 

.play { font-size:1em ;} 

将 这 个 样式 表 绑 定 到 HTML 对 象 上 时 ， 要 使 用 class 选择 器 ， 例 如 : 

<h1 class="play"> 文 本 内 容 </h1> 


和 id 选择 器 一 样 ，class 也 可 以 作为 派生 选择 器 ， 例 如 : 


写 


-fancy td{ 
color: #f60; /修改 文本 颜色 
background: #666; /修改 页 面 背景 颜色 
} 
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在 这 个 例子 中 ， 类 名 为 fancy 的 元 素 内 部 的 表格 单元 都 会 以 灰色 背景 显示 ， 文 本 则 是 橙色 文字 。 
5。 分 组 选择 器 

如 果 出 现 多 个 选择 器 定义 的 内 容 都 是 一 样 时 ， 例 如 : 


h1 {color:blue;} 
#text {color:blue;} 
.play {color:blue;} 


那么 ， 只 要 使 用 “,” 隔 开 选 择 符 就 可 以 了 。 例 如 : 
h1, #text, .play {color:blue;} 


说 明 : td 标签 表示 的 是 表格 单元 。 


[| > 注意 : 当 给 选择 符 命名 时 ， 不 能 使 用 数字 开头 ， 必 须 以 字母 或 下 划 线 开头 。 


6. 伪 类 和 伪 类 选择 器 

伪 类 选择 器 并 不 是 很 多 ， 它 们 通常 用 来 定义 一 些 特殊 的 效果 。 它 们 的 写法 由 一 个 冒号 和 一 个 带 有 
附加 条 件 的 属性 组 成 ， 如 超 链接 就 是 一 个 典型 的 伪 类 选择 器 (参照 第 6 章 ) 。 此 外 ， 还 有 伪 类 “:lang 
(语言 ) ”， 它 的 作用 是 允许 设计 者 为 不 同 的 语言 定义 特殊 的 规则 。 如 程序 7.4 所 示 为 使 用 的 伪 类 的 其 
中 一 种 。 

【本 节 示 例 参 考 : 资料 光盘 \ 第 7 章 \7-4 伪 类 “:lang (语言 ) ”的 使 用 .html】 

【实例 7-4】 擅 类 “:lang (语言 ) ”的 使 用 ， 其 源码 展示 如 下 : 


程序 7.4 伪 类 “:lang (语言 ) ”的 使 用 .html 


01 <html> 

02 <head> 

03 <style type="text/css"> 

04 q:lang(smile) 

05 { 

06 quotes: "o(n_n)o""~” ”// 这 里 定义 了 将 smile 转换 的 符号 
07 } 

08 </style> 

09 </head> 

10 <body> 

11 好 吧 ， 展 示 一 个 笑脸 吧 

12 <p> 博 君 一笑 <q lang="smile"> 祝 你 愉快 </q></p> 
13 </body> 

14 </html> 


“106。 


第 7 齐 CSS 和 MI 


【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 7.10 所 示 ， 伪 类 代码 的 位 置 被 伪 类 定义 的 内 容 所 替代 。 


ER 
hi 


| 
这 是 车 换 的 特殊 符号 


图 7.10 人 擅 类 “:lang (语言 ) ”的 使 用 


注意 : 使 用 伪 类 定义 的 页 面 可 以 使 用 Firefox 浏览 器 打开 ,而 IE 7.0 之 前 的 版 本 均 不 能 有 效 


【深入 学 习 】CSS 中 还 有 一 些 其 他 伪 类 ， 如 表 7.1 所 示 。 
表 7.1 CSS 中 的 伪 类 


伪 类 作 用 

:active 将 样式 添加 到 被 激活 的 元 素 中 

:focus 将 样式 添加 到 被 选中 的 元 素 中 

:hover 当 鼠 标 悬 浮 在 页 面 对 象 上 方 时 ， 向 页 面 对 象 添加 样式 
:link 将 样式 添加 到 未 被 访问 过 的 链接 中 

:Visited 将 样式 添加 到 被 访问 过 的 链接 中 

:first-child 将 特殊 的 样式 添加 到 页 面 对 象 的 第 一 个 子 元 素 中 
:lang 允许 设计 者 定义 指定 的 页 面 中 所 使 用 的 语言 


7.2.4 应 用 CSS 样式 表 


首先 需 分 清 这 样 一 个 概念 ， 应 用 CSS 样式 表 到 HTML 页 面 中 ， 和 将 CSS 样式 表 绑 定 到 HTML 页 面 
中 的 对 象 , 这 两 者 是 不 同 的 两 个 概念 。 例如， 在 7.2.3 小 节 中 ， 通 过 不 同 的 选择 器 将 样式 表 绑 定 到 HTML 
页 面 中 的 对 象 。 但 是 , 使 用 的 都 是 同一 种 方法 一 一 应 用 CSS 样式 表 到 HTML 页 面 中 , 这 种 方式 称 之 为 内 
入 样式 表 ， 而 这 种 应 用 CSS 的 方法 亦 有 4 种 ， 剩 下 的 3 种 方法 分 别 是 内 联 样式 表 、 外 联 样式 表 和 多 重 样 
式 表 。 

1. 嵌入 样式 表 

嵌入 样式 表 是 指使 用 <style> 标 签 将 CSS 样式 表 放 入 到 <head> 标 签 内 (参照 7.2.3 小 节 中 的 示例 ) 。 
这 种 用 法 的 好 处 在 于 将 页 面 的 表现 性 和 结构 性 实现 很 好 的 分 离 。 对 于 设计 者 来 说 ， 使 共同 协作 的 效率 
更 高 ， 写 法 是 : 

<style type="text/css"> 


</style> 
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<style> 标 签 内 部 是 type 属性 。 当 然 ， 也 有 一 些 其 他 的 属性 可 供 使 用 ， 如 media 属性 ， 可 以 用 定义 
以 何 种 媒介 来 提交 文档 。 文 档 可 以 被 显示 在 显示 器 、 纸 媒介 或 者 听觉 浏览 器 中 ， 如 下 代码 所 示 : 


<style type="text/css" media="screen"> 


2. 内 联 样式 表 

同时 又 常 被 称 为 行内 CSS， 通 过 使 用 style 属性 来 引用 声明 语句 ， 放 在 页 面 结构 性 标签 的 后 面 ， 
例如 : 

<p style="color: sienna; margin-left 20px"> 

页 面 文本 内 容 

</p> 


但 是 在 页 面 设计 时 ， 内 联 样式 表 应 尽量 少 用 ， 因 为 这 种 方法 不 能 将 页 面 表现 和 页 面 结构 很 好 地 分 
开 ， 通 常 是 在 不 得 已 的 情况 下 ， 用 作 补 充 调整 的 作用 。 


3. 外 联 样式 表 
在 创建 整 站 的 工程 时 ， 整 站 包含 很 多 不 同 的 子 页 面 ， 设 计 者 希望 一 个 CSS 样式 表 可 同时 用 于 几 个 
页 面 。 这 时 使 用 外 联 样 式 表 是 非常 好 的 选择 。 因 为 CSS 样式 表 可 以 作为 一 个 独立 文件 存储 在 页 面 外 部 ， 


后 级 名 为 “.css”。 通 常 的 情况 是 使 用 <link> 标 签 来 使 用 样式 表 ， 写 法 是 : 

<link rel="Shortcut " type="text/css " href="some。css" /> 

当然 ， 超 链接 的 不 一 定 是 一 个 文件 ， 也 可 以 引用 URL 地 址 文件 。 此 外 还 可 以 使 用 “@import” 来 
应 用 一 种 外 联 样式 表 ， 把 它 放 在 style 标签 中 间 ， 写 法 如 下 : 

<style type="text/css"> 


@import url("some.css"); 
</style> 
全 注意 : @import 是 CSS2 的 时 候 提出 来 的 ， 所 以 早期 的 浏览 器 并 不 支持 ， 如 IE 5.0 之 前 的 
浏览 器 。 
4. 多 重 样 式 表 


在 样式 表 中 ， 如 果 出 现 多 种 样式 表 ， 它 们 之 间 总 有 个 先后 的 问题 。 通 常 来 说 ， 当 多 个 样式 表 作 用 
于 同一 个 页 面 对 象 时 ， 离 这 个 页 面 对 象 最 近 的 样式 表 起 决定 作用 。 但 是 ， 行 内 样式 表 始 终 处 于 最 高 乡 
别 ， 如 程序 7.5 所 示 为 多 重 样式 表 下 的 先后 关系 。 
【本 节 示 例 参考 : 资料 光盘 \ 第 7 章 \7-5 多重 样式 表情 况 下 的 优先 级 .html】 
【实例 7-5】 多 重 样式 表情 况 下 的 优先 级 ， 其 源码 展示 如 下 : 
程序 7.5 ”多重 样式 表情 况 下 的 优先 级 .html 


01 <html> 
02 <head> 


告 7 这 CSS 过 克 让 


03 <title> 多 重 样式 表情 况 下 的 优先 级 

04 <ltitle> 

05 <link rel= "stylesheet" type="text/css" href="bobo.css"> // 这 是 外 联 样式 表 
06 <style type="text/css"> 

07 .hui {color:red; 

08 font-size:20px: // 这 是 内 联 样 式 表 
09 } 

10 </style> 

11 </head> 

12 <body> 

13 <div class="bobo"> 

14 <p class="hui"> 多 重 样式 表情 况 下 的 优先 级 

15 </div> 

16 <div class="hui"> 

17 <p class="bobo"> 多 重 样式 表情 况 下 的 优先 级 

18 </div> 

19 <div class="hui"> 

20 <p style="color:orange"; class="hui";> 多 重 样 式 表情 况 下 的 优先 级 
21 </div> 

22 </body> 

23 </html> 


说 明 : 在 这 个 例子 中 ,使 用 层 div 封装 了 3 个 部 分 ， 在 层 之 内 的 样式 表 不 会 影响 到 层 之 外 的 


【运行 程序 】.bobo 是 外 部 样式 表 ， 这 里 把 .bobo 外 部 样式 表 定义 为 : 


.bobo {color:blue; 
font-size:20px; 

么 ， 结 果 如 图 7.11 所 示 。 
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多 重 样式 表情 况 下 的 优先 级 


EE3 ET 
图 7.11 多 重 样式 表情 况 下 的 优先 级 
【深入 学 习 】 可 见 ， 在 第 14 行 和 第 17 行 代码 中 ， 两 行 的 样式 表 交 换 了 位 置 ， 而 作用 于 文本 的 则 
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是 离 页 面 对 象 最 近 的 样式 表 。 而 在 第 20 行 代码 中 ， 起 决定 效果 的 是 行内 链 式 表 。 所 以 ， 同 一 种 引用 样 
式 表 的 情况 下 ， 离 页 面 对 象 最 近 的 样式 表 起 作用 。 


7.3 用 CSS 来 修饰 页 面 文本 


本 书 在 前 面 的 章节 中 介绍 了 文本 的 排版 ， 并 没有 花 浓 重 的 墨 彩 去 描绘 如 何 展现 文本 的 形式 ， 而 当 
理解 了 CSS 的 使 用 后 ， 这 里 将 为 设计 者 打开 一 扇 广 阔 的 设计 天 空 ， 令 文本 可 以 变化 出 奇妙 的 样式 。 
7.3.1 修饰 页 面 文本 字体 

不 要 忽视 字体 的 作用 ， 字 体 的 设置 能 潜移默化 地 给 浏览 用 户 带 来 很 大 的 视觉 影响 。 在 CSS 中 ， 使 
用 font-family 属性 来 定义 字体 的 样式 。 说 到 字体 ， 中 国文 化 中 的 字体 一 向 渊源 博大 ， 至 少 也 可 以 定义 
出 上 百 种 。 但 是 可 惜 ， 原 则 上 浏览 器 只 支持 系统 中 默认 的 字体 。 如 果 设 计 者 希望 使 用 自 定 义 字 体 ， 需 
要 先 将 字体 存 入 电脑 中 。 如 程序 7.6 所 示 为 通过 样式 表 来 修饰 文本 字体 。 

【本 节 示 例 参考 ; 资料 光盘 \ 第 7 章 \7-6 ”CSS 修饰 文本 字体 .html】 

【实例 7-6】CSS 修饰 文本 字体 的 方法 ， 其 源码 展示 如 下 : 

程序 7.6 ”CSS 修饰 文本 字体 .html 


01 <html> 

02 <head> 

03 <title>CSS 修饰 文本 字体 </title> 

04 <style type="text/css"> 

05 h1 {font-family: 微 软 雅 黑 ; /| 设置 标题 字体 样式 
06 1 

07 p {font-family: 隶书 ; /设置 段落 字体 样式 
08 } 

09 </style> 

10 </head> 

11 <body> 

12 <h1>2008 中 国 经 济 发 展 形式 </h1> 

13 <p> 

14 从 宏观 上 说 ， 中 国 经 济 发 展 整体 形势 良好 。2008 年 国家 统计 局 公布 数据 为 上 半年 
15 国内 生产 总 值 130619 亿 元 

06" 

17 </p> 

18 </body> 

19 </html> 


【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 7.12 所 示 。 
【深入 学 习 】 这 样 就 完成 一 个 简单 的 页 面 文本 的 修饰 了 ， 只 是 稍稍 地 做 了 一 点 字体 改变 ， 但 整个 
页 面 看 起 来 已 经 略 有 不 同 ， 似 乎 是 一 张 散发 油墨 的 报纸 。 
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的 大 三 铀 着， 当今 图 际 束 寺 、 流 有 中 国 是 不 无 天 的。 
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图 7.12 使 用 CSS 修饰 文本 字体 


注意 ; 如 果 不 确定 浏览 器 中 的 字体 ， 或 者 想 尝 试 一 些 罕见 的 字体 ， 可 以 在 指定 的 字体 后 添 
加 备用 字体 ， 例 如 : 


font-family: "全 新 硬笔 行书 简 ", 宋 体 ; 


这 样 ， 如 果 浏 览 者 系统 中 没有 “全 新 硬笔 行书 简 ” 这 个 字体 ， 浏 览 器 会 默认 改变 页 面 文本 为 宋体 。 
7.3.2 文本 的 字号 


font-size 属性 用 来 改变 字体 的 大 小 。 在 规定 字体 大 小 时 ， 最 常见 的 有 3 种 表示 方法 ， 也 可 以 说 是 3 
种 度量 方案 ， 分 别 是 px、em 和 %。 

口 ”像素 单位 px: 使 用 像素 直接 来 定义 字体 的 大 小 ， 绝 对 单位 ， 如 12px， 无 论 在 哪个 显示 器 中 ， 
字体 的 大 小 只 会 相对 于 显示 设备 来 确定 。 

口 字体 大 小 em: 这 是 目前 较为 流行 的 一 种 定义 字体 大 小 的 方式 ， 一 个 字体 的 大 小 就 是 leam， 任 
何 浏览 器 的 默认 字体 大 小 都 是 lem。 用 户 可 以 根据 自己 的 喜好 定义 默认 字体 ， 网 页 中 的 字体 
大 小 就 可 以 弹性 地 随 着 改变 。 

口 ”百分比 %: 这 是 以 当前 文本 的 百分比 定义 尺寸 。 例 如 ，{ font-size:200%} 是 指 文字 大 小 为 原来 
的 两 倍 。 在 页 面 制作 中 ,通常 使 用 % 定 义 页 面 主体 的 初始 字体 大 小 ， 然 后 以 em 为 单位 表示 字 
体 的 大 小 ， 如 程序 7.7 所 示 为 改变 页 面 文字 的 大 小 。 


tt 注意 : 还 有 一 种 表示 单位 的 方式 : pt，12pt=1em。 


【本 节 示 例 参考 ， 资 料 光 盘 \ 第 7 章 \7-7 CSS 修饰 文本 字体 大 小 .html】 
【实例 7-7】CSS 修饰 文本 字体 大 小 ， 其 源码 展示 如 下 : 
程序 7.7 CSS 修 饰 文本 字体 大 小 .html 


01 <html> 
02 <head> 
03 <title>CSS 修饰 文本 字体 大 小 </title> 
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04 <style type="text/css"> 

05 body {font-size:80%; 

06 } // 将 整个 页 面 的 字体 定义 为 标准 的 80% 
07 h1 {font-family: 微 软 雅 黑 ; 

08 font-size:2em; // 将 页 面 文 本 字体 的 大 小 定义 为 2em 
09 六 

10 p {font-family: 隶书 ; 

11 font-size:1.5em; 

12 } 

13 </style> 

14 </head> 

15 <body> 

16 <h1>2008 中 国 经 济 发 展 形式 </h1> 

17 <p> 


18 ”从 宏观 上 说 ， 中 国 经 济 发 展 整体 形势 良好 。2008 年 国家 统计 局 公布 数据 为 上 半年 国内 生产 总 
19 值 130619 亿 元 ， 


20 > 
21 </body> 
22 </html> 


【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 7.13 所 示 。 


一 一 一 > agem mm 
2008 中 国 经 济 发 展 形式 

从 才 现 上 说 。 中 国 经 济 长 展 昌 体形 扫 卫 好 。2008 征 国家 过 
计 局 信教 呈 为 上 村 年 国内 生产 吉 硬 1306j9 亿 头 ， 掉 可 履 
价 稳 计 短 ， 同 比 丧 长 10. 颖 ， 比 上 上 洁 同期 回 第 1.8 个 机 节 

记 。 其 中 各 二 产生 和 第 互 产生 二 长 均 直 过 1 从 下 个 下 
独得 们 可 以 看 由 中国 给 污 基 过 作风 的 是 中 国 综合 国力 和 
四 际 影 响 力 的 大 柱 接 逢 ， 岩 今 国际 事 考 ， 设 有 中国 是 不光 
天 史 
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图 7.13 CSS 修饰 文本 字体 大 小 

【深入 学 习 】 注 意 和 图 7.12 相 比 ， 这 个 页 面 的 文本 大 小 更 合理 ， 字 体 配合 页 面 也 更 加 舒适 ， 使 页 
面 效果 显得 十 分 协调 。 所 以 在 设计 页 面 文本 时 ， 要 注意 标题 和 文章 内 容 的 大 小 对 比 ， 还 有 在 整体 页 面 
中 的 效果 。 这 不 仅 是 技术 上 的 问题 ， 需 要 在 不 同 的 情况 下 作出 灵活 的 应 变 ， 而 CSS 很 好 地 提供 了 和 舒适 
的 自由 度 。 
7.3.3 ”文本 段落 行 高 

使 用 line-height 进行 行 高 的 设 定 ， 同 样 ， 段 落 行 高 的 数值 也 可 以 通过 单位 px、 单 位 em 和 百分比 
来 设 定 。lem 和 100% 代 表 正 常 的 行距 ， 所 以 用 em 和 % 表 示 行 距 也 是 比较 好 的 选择 ， 如 程序 7.8 所 示 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 7 章 \7-8 不 同行 高 的 对 比 .html】 

【实例 7-8】 不 同行 高 对 比 的 方法 ， 其 源码 展示 如 下 : 
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程序 7.8 不 同行 高 的 对 比 .html 


01 <html> 

02 <head> 

03 <title>CSS 修饰 文本 字体 大 小 </title> 

04 <style type="text/css"> 

05 body {font-size:80%; /设置 页 面 字 体 的 大 小 
06 } 

07 h1 {font-family: 微 软 雅 黑 ; 

08 font-size:2em; // 设 置 标题 字体 的 大 小 
09 } 

10 .big {font-family: 隶书 ; 

11 font-size:1.5em; 

12 line-height:1.5em; // 设 置 行 高 为 1.5em 
13 : 

14 .small {font-family: 隶书 ; 

15 font-size:1.5em; 

16 line-height:0.8em; // 设 置 行 高 为 0.8em 
17 } 

18 .normal {font-family: 隶书 ; 

19 font-size:1em; // 设 置 行 高 为 lem 

20 

21 </style> 

22 </head> 

23 <body> 

24 <h1>2008 中 国 经 济 发 展 形式 </h1> 

25 <p class="big"> 从 宏观 上 说 ， 中 国 经 济 发 展 整体 形势 良好 。2008 年 国家 统计 局 公布 数据 为 上 半年 
26 ”国内 生产 总 值 130619 亿 元 ， 

2 

28 <p class="small"> 按 可 比价 格 计算 ， 同 比 增长 10.4%， 比 上 年 同期 回落 1.8 个 百分点 。 其 中 ， 
29 ”第 二 产业 和 第 三 产业 增长 均 超 过 10%。 

30 <p class="normal"> 从 这 个 数据 我 们 可 以 看 出 ， 中 国 经 济 基础 伴随 的 是 中 国 综合 国力 和 国际 影响 力 
31 ”的 大 幅 提 升 ， 当 今 国际 事务 ， 没 有 中 国 是 不 完美 的 。 

32 </body> 

33 </html> 


【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 7.14 所 示 。 


从 过 观 上 说 市 国 纵波 玉 拓 要 体形 势 闪 好 。2008 年 押 
家 名 计 局 公有 教 握 为 上 椒 年 国内 主 广 坊 人 130619 亿 
A 
摧 可 比价 煌 计算 。 同 比 击 长 10. 岛 ， 此 大 车 问 期 回 后 
.8 个 证 汪 发 ， 其 中 第 二 入 二 和 第 三 产生 二 基 多 适 
和 10 


从 下 个 教 拓 稀 们 可 以 看 由， 中 国 给 污 基 过 作风 的 是 中 
国际 售 国 力 和 国际 影响 力 的 大 柱 旨 升 ， 雪 今 国际 可 
考 。 没有 中 国 是 不 完美 的 


图 7.14 CSS 修改 段落 行距 
“ds 
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【深入 学 习 】 留 意 代码 中 第 10 一 20 行 ， 这 部 分 是 对 页 面 中 的 段落 文章 进行 设 定 ， 但 是 未 免 有 些 拖 
省 ， 更 好 的 方式 应 该 写成 : 
p {font-family: 隶书 ; 
font-size:1.5em; 


注意 : 图 中 3 段 文本 行距 依次 对 应 为 1.5em、0.8em 和 1em。 


使 用 分 组 选择 器 样式 
来 精简 代码 


p.big { line-height:1.5em 


p.small{ line-height:0.8em 


】 
这 样 使 用 分 组 样式 定义 ， 才 真正 意义 上 做 到 了 精简 页 面 的 代码 ， 灵 活 地 使 用 了 CSS 样式 表 。 
7.3.4 禁止 文本 自动 换行 
大 部 分 互联 网 上 的 页 面 都 禁止 页 面 内 容 自动 换行 ， 这 似乎 已 经 成 了 一 种 默认 的 许可 。 而 如 果 页 面 
随 着 浏览 器 的 大 小 自动 换行 确实 令 人 眼花 线 乱 ， 既 然 人 们 已 经 习惯 于 这 样 的 页 面 展示 形式 ， 那 么 就 将 
这 个 习惯 保持 下 去 。 通 过 white-space 属性 可 以 禁止 文本 自动 换行 ， 如 程序 7.9 所 示 为 禁止 文本 自动 换 
行 的 页 面 。 
【本 节 示例 参考 ， 资 料 光 盘 \ 第 7 章 \7-9 ”禁止 文本 自动 换行 .html】。 
【实例 7-9】 禁 止 文本 自动 换行 的 方法 ， 其 源码 展示 如 下 : 
程序 7.9 禁止 文本 自动 换行 .html 


01 <html> 

02 <head> 

03 <title> 禁 止 文本 自动 换行 </title> 

04 <style type="text/css"> 

05 p {white-space: nowrap  ”//nowrap 属性 指定 页 面 无 法 自动 换行 
06 } 

07 </style> 

08 </head> 

09 <body> 


10 <p> 历 史书 上 写 道 : 三 国 吴 王孙 权 派 1 万 官兵 到 达 “ 夷 洲 ” 台湾) ， 吴 人 沈 莹 的 《临海 水 土 志 》 留 下 了 
11 ”世界 上 对 台湾 最 早 的 记述 。 隋 唐 时 期 (公元 589 一 618 年 ) 称 台湾 为 “ 流 求 ”。 隋 王朝 曾 三 次 出 师 台 湾 。 


12 </body> 
13 </html> 


【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 7.15 所 示 。 
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图 7.15 禁止 文本 自动 换行 


所 以 在 这 个 页 面 中 ， 当 使 用 white-space 时 ， 浏 览 嚣 中 的 页 面 不 会 因为 窗口 大 小 而 自动 换行 ， 因 而 


出 现下 滑 栏 


说 明 : 此 外 ， 当 定义 为 white-space: pre 时 ， 其 作用 相当 于 <pre> 标 签 (参照 第 3 章 内 容 ) 。 


7.4 给 页 面 对 象 添加 颜色 


在 第 5 章 中 已 经 介绍 了 颜色 的 基本 概念 。 而 CSS 所 要 做 的 工作 ， 就 是 通过 不 同 的 属性 作用 于 不 同 
的 HTML 页 面 对 象 ， 将 颜色 值 赋予 这 些 对 象 就 可 以 了 。 主 要 有 color 和 background-color 这 两 个 重要 的 
属性 。 准 确 地 说 ，color 属性 修改 其 对 象 前 景色 ， 而 background-color 则 修改 其 对 象 的 背景 色 。 通 过 下 
面 这 个 例子 可 以 很 好 地 说 明 前 景色 和 背景 色 的 概念 ， 如 程序 7.10 所 示 为 使 用 CSS 修饰 页 面 的 颜色 。 
【本 节 示 例 参考 : 资料 光盘 \ 第 7 章 \7-10 使 用 CSS 修饰 页 面 颜色 .html】 


【实例 7-10】 使 用 CSS 修饰 页 面 颜色 的 方法 ， 其 源码 展示 如 下 : 


<html> 
<head> 


程序 7.10 ”使 用 CSS 修 饰 页 面 颜色 .html 


<title> 使 用 CSS 修饰 页 面 颜色 </title> 
<style type="text/css"> 
body {color:white; 
background-color:black; // 设 置 页 面 背景 颜色 为 黑色 
font-family: 微 软 雅 黑 ; /设置 字体 的 样式 
font-size:1.2em; // 设 置 字体 的 大 小 


} 


h2 {background-color:green /设置 文本 背景 颜色 为 绿色 


} 
p {background-color:orange; /设置 文本 背景 颜色 为 橙色 


1 
</style> 


</head> 


<body> 


<h2> 多 重 样式 表情 况 下 的 优先 级 </h2> 
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【运行 程序 】 浏 览 该 页 面 ， 


<p> 多 重 样式 表情 况 下 的 优先 级 </p> 


</body> 
</html> 


最 终 的 浏览 结果 如 图 7.16 所 示 。 
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图 7.16 使 用 CSS 修饰 页 面 颜色 
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【深入 学 习 】 如 代码 第 5 行 所 示 ，body 样式 表 定 义 了 页 面 背 
代码 第 10 行 和 第 12 行 ， 分 别 定义 了 各 自 的 对 象 


色 


景 是 黑色 ， 而 文本 颜色 是 白色 。 然 而 


录 丰 二 


[= 
自 


绿色 ”和 “ 棒 色 ”。 可 以 发 现 ， 


文本 的 背景 部 分 变 成 了 对 应 于 不 同 CSS 样式 表 作 用 的 颜色 ， 分 别 是 “绿色 ”和 “橙色 ”。CSS 中 ， 关 
于 文本 和 页 面 背景 的 属性 很 多 


， 这 里 将 它们 列举 出 来 ， 如 表 7.2 所 示 。 
表 7.2 修饰 页 面 文 本 和 页 面 背景 的 属性 


属 性 说 明 
background 作用 是 将 背景 属性 设置 在 一 个 声明 中 
background-color 设置 页 面 对 象 的 背景 颜色 
background-image 引用 图 像 设置 为 背景 
background-repeat 设置 背景 图 像 重 复 的 方式 
background-position 设置 背景 图 像 的 具体 位 置 


background-attachment 


背景 图 像 是 否 固定 或 者 随 着 页 面 的 其 余部 分 滚动 


Color 设置 文本 颜色 
line-height 设置 行 高 
white-space 设置 元 素 中 段落 排版 的 方式 
word-spacing 设置 字 间 距 
font-family 设置 文本 字体 
font-size 设置 字体 的 尺寸 
font-style 设置 字体 风格 
font-weight 设置 字体 的 粗细 
direction 设置 文本 方向 
letter-spacing 设置 字符 间距 
text-align 对 齐 页 面 中 的 文本 
text-decoration 给 文本 添加 下 划 线 
text-transform 控制 元 素 中 的 字母 
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7.5 ”案例 : 使 用 CSS 制作 个 人 页 面 


使 用 样式 表 可 以 更 容易 地 做 出 比较 个 性 化 的 页 面 ， 良 好 的 习惯 是 先 在 纸 上 夯 出 大 概 页 面 的 草图 ， 


根据 草图 ， 制 定 需 要 的 CSS 样式 表 。 当 然 ， 还 要 准备 好 页 面 的 文字 资料 和 图 像 。 当 这 些 工 作 都 完成 之 
后 ， 接 下 来 就 是 将 这 些 素材 拼接 在 一 起 。 在 这 个 例子 中 ， 表 现 的 是 一 个 个 人 主页 ， 并 没有 使 用 复杂 的 
技术 ， 仅 仅 是 通过 使 用 图 像 、 放 入 文本 这 样 的 技术 ， 如 程序 7.11 所 示 为 制定 的 个 人 页 面 。 

【本 节 示 例 参考 ; 资料 光盘 \ 第 7 章 \7-11 个 人 页 面 .html】 


【实例 7-11】 个 人 页 面 ， 其 源码 展示 如 下 : 


程序 7.11 个 人 页 面 .html 


<!IDOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 使 用 CSS 制作 个 人 页 面 </title> 
<style type="text/css"> 
body {background-image:url( 图 片 /背景 .png); 
background-attachment:fixed; /设置 页 面 背景 图 像 放置 方式 
font-size:100%; 
} 
p {text-align:right; 
} 
.biaoti { text-align:right; 


color : #D35COF; 
font-size : 2.5em; /设置 字体 的 大 小 
font-weight : bold; 
line-height : 1.4em; /设置 行 高 
font-family : Cooper Std Black; 
} 

#date { text-align:right; /设置 文本 对 齐 方式 

color : #999999; // 设 置 文本 颜色 


font-size : .8em; 
font-weight : bold; 
font-family : Geneva, Arial, Helvetica, sans-serif; 


yD 
#content {color : #3399FF:; /设置 文本 颜色 
font-size : 1em; 
line-height : 1.6em: /设置 行 高 
font-weight : bold; 
font-family : 幼 圆 ; 
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32 white-space: pre; 

33 

34 ailink {color : #6d2542; 通过 伪 类 修改 页 面 
a 3 :none; 的 链接 状态 
37 a:visited {color : #999999; 

38 text-decoration : none; 

39 . 

40 a:hover {color : #999999; 

41 text-decoration : underline; 

42 } 

43 a:active {color : #999999; 

44 text-decoration : none; 

45 

46 </style> 

47 </head> 

48 <body > 

49 <p><img src=" 图 片 /标题 .png" alt= "标题 " height="120" align="right"/> 
50 <p class="biaoti">JennyYuan 

51 <p id="date"><a href=" 后 退 .html">2008 年 9 月 12 日 </a></p> 

52 <p><hr align="right" width="45%" > 

53 <p id="content"> 

54 把 掌声 留 给 坚守 得 住 承 诺 的 人 . 

55 毕竟 ,为 了 承诺 一 直 守 侯 . 

56 多 辛苦 ,多 执着 ,多 浪漫 . 

57 ». 

58 The End 在 第 100 天。 

59 </body> 

60 </html> 


【运行 程序 】 代 码 的 第 1 一 47 行 部 分 是 页 面 的 头 部 ， 主 要 包括 声明 代码 和 CSS 样式 表 的 制定 ， 而 
这 些 制 定 都 是 建立 在 已 确定 好 的 页 面 结构 上 。 第 48~60 行 的 部 分 是 页 面 的 结构 代码 。 结 果 如 图 7.17 
所 示 。 


gg 


图 7.17 使 用 CSS 制作 个 人 页 面 
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【深入 学 习 】 在 这 个 例子 中 ， 页 面 结构 非常 简单 ， 由 代码 可 以 知道 ， 几 乎 都 是 <p> 来 排版 的 ， 大 部 
分 都 是 CSS 帮助 设计 者 来 实现 的 效果 。 这 样 的 页 面 在 设计 时 要 注意 字体 、 字 号 和 行距 的 设 定 ， 不 要 忽 
视 了 这 些小 细节 ， 它 们 带 来 的 影响 是 非常 重要 的 。 

代码 第 51 行 是 样式 表 和 伪 类 同时 作用 于 一 个 对 象 .整个 页 面包 含 了 行内 样式 表 如 第 49 行 和 第 52 行 ， 
以 及 嵌入 式样 式 表 的 引用 如 代码 第 50 行 、51 行 和 53 行 。 不 同样 式 表 的 引用 互相 配合 ， 相 得 益 彰 。 

其 中 , 第 8 一 13 行 属于 HTML 页 面 选择 符 , 第 14 一 20 行 是 类 选择 符 , 第 21 一 33 行 是 标志 选择 符 ， 
第 34 一 45 行 是 典型 的 伪 类 选择 符 ， 用 于 设置 页 面 中 的 链接 状态 。 

当然 ， 这 个 页 面 代码 并 非 十 分 理想 。 由 于 CSS 样式 表 的 级 联 性 ， 样 式 表 之 间 容 易 由 上 级 对 下 级 产 
生 影响 ， 这 样 在 编排 页 面 时 总 得 小 心 翼 翼 。 因 此 ， 在 页 面 设计 时 便 引 入 了 div 层 的 概念 。 层 的 概念 是 
用 来 封装 CSS 样式 表 ， 避 免 CSS 样式 表 之 间 出 现 错误 交叉 。 


， 说 明 : 层 的 学 习 将 在 后 面 的 章节 中 详细 介绍 。 


7.6 小 结 


本 章 是 关于 CSS 样式 表 的 学 习 ， 涉 及 到 的 概念 颇 多 ， 需 要 读者 用 心 去 理解 ， 在 理解 的 基础 上 才能 
对 CSS 运用 自如 。 本 章 需 掌握 的 知识 点 有 : 

口 CSS 的 写法 规则 ， 包 含 选 择 符 、 属 性 和 属性 值 ， 如 “color:red;”。 

口 ”选择 符 的 3 种 写法 ， 一 般 的 选择 符 、 以 “#” 开 头 的 id 选择 符 和 以 “.” 开 头 的 class 选择 符 。 

口 ”选择 器 的 6 种 样式 及 它们 的 作用 ，HTML 页 面 选择 器 、id 选择 器 、class 选择 器 、 派 生 选 择 器 、 

分 组 选择 器 和 伪 类 选择 器 。 

口 ”使 用 CSS 样式 表 的 3 种 方式 ， 即 行内 CSS、 嵌 入 式 CSS 和 外 联 式 CSS。 

口 CSS 中 文本 属性 的 介绍 。 

在 本 章 的 最 后 给 出 了 一 个 综合 例子 ， 结 合 各 种 样式 表 制 作 了 一 个 个 人 页 面 。 在 第 8 章 中 ， 将 介绍 
如 何在 页 面 中 设计 表格 ， 通 过 表格 来 表现 页 面 的 内 容 。 
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第 8 章 表 格 


没有 CSS 之 前 ， 表 格 是 最 流行 的 布局 页 面 方式 ， 而 不 只 是 单元 格 组 成 的 表格 ， 不 过 那 已 经 是 很 久 
以 前 的 事情 了 。 现 在 谈论 Web 设计 时 ， 再 说 到 “表格 ”， 那么 它 就 是 一 个 普通 的 由 单元 格 组 成 的 表格 。 
生活 中 经 常 需要 用 到 表格 ， 同 样 ， 虽 然 现在 表格 的 使 用 频率 大 不 如 前 ， 但 它 又 是 页 面 设计 中 不 可 
或 缺 的 一 个 元 素 。 在 一 些 服务 性 网 站 中 ， 经 常 需要 使 用 表格 来 传递 信息 给 浏览 者 ， 方 便 用 户 下载 ， 如 
电信 公司 的 话费 单 等 。 当 然 ， 如 果 你 的 老板 要 求 你 整理 工作 报表 ， 你 告诉 他 在 你 的 个 人 主页 上 提供 每 
个 月 的 报表 下 载 ， 说 不 定 也 是 一 件 很 酷 的 事情 。 本 章 的 知识 点 如 下 。 
学 习 制 作 表格 。 
修饰 表格 的 单元 格 。 
拆 分 合并 表格 。 
使 用 CSS 样式 表 来 表现 表格 。 
表格 的 实际 应 用 。 


OOODODO 


8.1 理解 页 面 中 的 表格 


表格 看 上 去 虽然 只 是 一 个 一 个 的 小 格子 组 成 的 样子 ， 但 是 ， 谈 及 在 HTML 中 制作 表格 ， 远 远 不 是 
看 上 去 那么 直接 。 表 格 涉及 的 属性 很 多 ， 因 为 人 们 在 表述 表格 时 ， 不 是 说 “ 某 某 表格 左上 角 的 那个 格 
子 ”， 而 是 通过 描述 某 一 行 和 某 一 列 来 定位 某 个 单元 格 的 位 置 ， 这 里 已 经 描述 了 两 个 属性 。 一 个 普通 
的 表格 在 页 面 中 看 上 去 如 图 8.1 所 示 。 
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一 个 普通 的 表格 


1 表 头 2 表 头 3 表 头 


4 单元 格 。 5 单元 格 。 6 单元 格 


7 单元 格 | 8 单元 格 。。 9 单元 格 


2 EE 7 
8.1 一 个 普通 的 表格 


这 是 一 个 3X3 的 表格 ， 横 排 为 行 竖 排 为 列 ， 每 一 个 格子 称 之 为 单元 格 。 在 HTML 页 面 中 不 仅 可 
以 定义 表格 行列 的 数量 ， 还 可 以 设 定 表格 边框 的 样式 、 单 元 格 的 长 宽 高 ， 以 及 单元 格 彼此 之 间 的 距离 。 
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所 以 在 HTML 页 面 中 ， 编 辑 表格 是 一 项 不 困难 却 很 繁琐 的 工程 。 
8.2 普通 表格 的 应 用 


这 种 表格 常见 于 课程 表 、 出 勤 表 或 者 价目 表 这 种 形式 的 表格 ， 使 用 频率 很 高 。 因 此 ， 如 果 只 是 针 
对 简单 的 文本 内 容 ， 仅 仅 是 希望 这 些 内 容 横 排 或 者 竖 排 ， 那 么 表格 是 一 个 比较 好 的 方法 。 


8.2.1 制作 普通 表格 


表格 属于 结构 性 标签 ， 使 用 <table> 标 签 。 一 个 最 简单 的 完整 表格 也 需要 具备 表 头 、 行 、 列 的 信息 。 
所 以 它 的 代码 是 这 样 的 : 


<table > 

<tr> 
<th>Head1</th> 
<th>Head2</th> 

</tr> 

<tr> 
<td>row 1, cell 1</td> 
<td>row 1, cell 2</td> 

</tr> 

<tr> 
<td>row 2, cell 1</td> 
<td>row 2, cell 2</td> 

</tr> 


</able> 

这 样 看 代码 真 的 很 难 想象 这 个 表格 是 什么 样子 ， 如 果 用 表格 的 形式 去 表达 这 段 代码 ， 则 如 图 8.2 
所 示 。 

通过 和 表格 实体 的 对 比 ， 可 以 明白 此 前 的 代码 表示 的 是 一 个 3X2 的 表格 ,而 <table> 标 签 封装 了 一 
个 表格 。 在 HTML 中 ， 首 先 用 <tr> 来 定义 行 ， 如 这 里 有 3 行 ，<table> 标 签 中 即 先 定义 3 组 <tr> 标 签 。 
接着 用 <td> 来 定义 每 一 个 单元 格 ，<th> 表 示 的 是 表 头 单元 格 ， 所 以 ， 不 仅 每 一 行 都 要 描述 清楚 ， 而 且 
每 一 个 单元 格 也 要 逐一 定义 。 


说 明 : 如 果 不 希 望 有 表 头 行 ， 可 以 省 去 <th> 标 签 。 此 外 ，IE 浏览 器 会 默认 隐藏 空 单元 格 ， 
即 如 “<td></td>”。 如 果 中 间 没 有 内 容 ， 最 后 显示 的 效果 会 很 奇怪 。 习 惯 地 最 好 放 入 一 个 空格 占 位 ， 如 


“<td>&nbsp;</td>”。 


当然 ， 表 格 的 代码 也 可 能 写成 如 下 代码 ， 这 是 以 列 为 表 头 的 表格 ， 其 结果 如 图 8.3( 上边) 所 示 。 
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<table> 


<th>Head1</th> 
<td>row1，cell2</th> 
</tr> 
<tr> 
<th>Head2</th> 
<td>row 2, cell 2</td> 
</tr> 
<tr> 
<th>Head3</th> 
[std>row 3, cell 2</td> | 单元 格 
</tr> 
</table> 


或 者 也 可 以 写成 如 下 代码 ， 将 第 一 组 的 <tr> 标 签 内 的 对 象 全 部 定义 为 表 头 。 此 后 每 一 组 <tr> 标 签 内 
的 第 一 个 标签 定义 为 <th> 标 签 ， 即 之 后 的 每 一 行 第 一 个 单元 格 表示 为 表 头 。 这 样 就 是 分 别 以 横 列 第 一 
行 作为 表 头 。 
<table> 
<tr> 
<th>Head1</th> 
<th>HEAD1</th> 
</tr> 
<tr> 
<th>Head2</th> 
<td>row 1, cell 2</td> 
</tr> 
<tr> 
<th>Head3</th> 
<td>row23, cell 2</td> 
</tr> 
</table> 


这 样 每 一 个 行 的 第 一 个 单元 格 被 认为 是 表 头 ， 如 图 8.3 (下 边 ) 所 示 。 


图 8.2 表格 的 代码 形象 化 比较 图 8.3 表 头 的 样式 
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8.2.2 ”表格 的 基本 属性 


表格 的 基本 属性 即 是 指 表格 的 行 、 列 和 单元 格 ， 但 并 不 是 每 一 个 表格 的 单元 格 都 是 统一 大 小 的 ， 
所 以 需要 设计 者 通过 一 些 属性 参数 去 修改 表格 的 样子 ， 让 它们 可 以 变 得 更 多 样 性 一 些 。 这 样 的 属性 有 

1. 行 高 height 属性 

由 于 默认 情况 下 一 个 空白 表格 的 单元 格 是 平均 分 配 的 ， 所 以 如 果 需 要 自 定 义 行 高 ， 要 事先 设 定 表 
格 的 总 高 度 。 可 以 使 用 CSS 样式 表 先 定义 table, 然后 定义 th 或 tr。 若 想 改变 图 8.2 中 表格 的 表 头 行 高 
则 样式 表 应 该 写 为 : 


[Ee 注意 : 表格 中 的 内 容 会 自动 影响 到 单元 格 的 大 小 分 配 。 


<style type="text/css"> 
table {height:185px; 


} 

table th {height:32px; 

} 

</style> 

当 使 用 这 个 CSS 时 ， 结 果 如 图 8.4 所 示 。 
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图 8.4 表格 行 高 


注意 : 因为 表格 中 只 有 一 个 表 头 ， 即 <th>， 所 以 才 可 以 定义 样式 表 为 “table thf}”。 如 果 
要 定义 普通 行 <tr>， 那 么 应 该 选择 其 他 定义 方式 ， 如 可 以 定义 为 “#r1 ()”， 通 过 “<trid="r1">” 绑 定 
到 对 象 。 


2. 宽度 width 属性 


如 果 只 是 需要 修改 表格 列 的 宽度 ， 则 只 使 用 width 属性 即 可 。 但 是 不 同 于 行 高 的 是 ， 表 格 中 的 宽 
度 是 针对 整个 表格 或 每 一 个 单元 格 的 ， 所 以 像 下 面 这 样 的 写法 是 错误 的 。 
“123 。 
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table {width:400px; 
} 
table th {width:100px; 
} 

表格 的 宽度 并 不 会 改变 。 这 是 因为 表格 中 一 行 有 多 个 单元 格 ， 浏 览 器 无 法 辨认 解析 代码 指定 的 具 
体 是 哪 一 个 单元 格 的 宽度 。 而 由 于 这 一 行 无 论 有 多 少 个 单元 格 ， 它 们 的 行 高 始终 是 相同 的 ， 所 以 设置 
行 高 时 不 会 有 问题 。 那么 为 了 避免 这 样 的 错误 , 这 里 使 用 一 种 更 方便 的 方法 ,如 程序 8.1 所 示 为 修改 表 
格 的 宽度 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 8 章 \8-1 修改 表格 的 宽度 .html]】 

【实例 8-1】 修 改 表格 宽度 的 方法 ， 其 源码 展示 如 下 : 


程序 8.1 修改 表格 的 宽度 .html 


01 <head> 

02 ”<title> 设 定 表格 的 宽度 </title> 

03 </head> 

04 <body> 

05 <table height="168" border="1"> 
06 <tr> 

07 <td width="144">Head1</th> ”// 通 过 表 头 来 设置 表格 单元 格 的 宽度 
08 <td width="240">Head2</th> 
09 <htr> 

10 <tr> 

11 <td >row 1, cell 1</td> 

12 <td>row 1, cell 2</td> 

13 </tr> 

14 <tr> 

15 <td >row 2, cell 1</td> 

16 <td>row 2, cell 2</td> 

17 <htr> 

18 </table> 

19 </body> 


【运行 程序 】 这 样 表 格 宽 度 就 改变 了 ， 如 图 8.5 所 示 。 
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8.5 ”修改 表格 的 宽度 
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3. 单元 格 大 小 属性 height 和 width 
单元 格 的 大 小 其 实 就 是 由 高 和 宽 两 个 因素 组 成 的 。 所 以 ， 如 果 要 准确 定位 一 个 单元 格 的 具体 大 小 ， 
这 两 个 因素 是 缺 一 不 可 的 ， 必 须要 同时 具备 ， 这 样 才能 定位 每 个 单元 格 的 大 小 。 


说 明 : 修改 行 高 时 使 用 了 HTML 页 面 选择 器 ， 修 改 宽度 时 选择 使 用 了 页 面 内 修改 表格 的 属 


性 。 在 这 两 种 方法 中 ， 后 者 更 适合 使 用 . 


8.2.3 合并 单元 格 


合并 同行 单元 格 使 用 colsplan 属性 。 在 需要 修改 的 那 一 行 中 ， 先 删除 多 余 的 单元 格 ， 这 是 重要 的 
一 步 ， 如 果 删 错 了 单元 格 ， 很 可 能 最 后 呈现 的 表格 会 面目 全 非 。 这 之 后 再 定义 合并 的 单元 格 。 合 并 同 
排 的 单元 格 使 用 rowspan 属性 , 这 里 介绍 一 种 合并 单元 格 的 方法 , 如 程序 8.2 所 示 为 合并 单元 格 的 范例 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 8 章 \8-2 合并 单元 格 .html】 

【实例 8-2】 合 并 单元 格 的 方法 ， 其 源码 展示 如 下 : 

程序 8.2 合并 单元 格 .html 


01 <html> 

02 <head> 

03 <title> 合 并 表格 中 单元 格 </title> 
04 </head> 

05 <body> 


06 ”<h3> 普 通 的 表格 </h3> 
07 <table width="305" height="156" border="1"> ”// 设 置 表格 的 长 宽 和 边框 的 粗细 


08 <tr> 

09 <td width="70" height="50">1</td> 
10 <td width="70">2</td> 
11 <td width="70">3</td> 
hy <td width="70">4</td> 
13 </tr> 

14 <tr> 

15 <td height="50">5</td> 
16 <td>6</td> 

17 <td>7</td> 

18 <td>8</td> 

19 </tr> 

20 <tr> 

21 <td height="50">9</td> 
22 <td>10</td> 

23 <td>11</td> 

24 <td>12</td> 

25 </tr> 
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</table> 
<p><h3> 合 并 表格 单元 格 后 </h3></p> 
<table width="305" height="156" border="1"> 
<tr> 
<td width="70">3</td> 
<td width="70" rowspan="3">4&amp;8&amp;12F/td> 
</tr> 
<tr> 
<td height="50" width="70">5</td> 
<td width="70">6</td> 
<td>7</td> 
</tr> 
<tr> 
<td height="70">9</td> 
<td>10</td> 
<td>11</td> 
</tr> 
</table> 
</body> 
</html> 


【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 8.6 所 示 。 


【深入 学 习 】 留 意 对 比 代 码 中 对 应 页 面 的 不 同 编号 表格 的 位 置 。 合 并 单元 格 ， 这 是 一 个 不 错 的 方 
法 。 首 先 编排 好 单元 格 的 序号 ， 根 据 希 望 合并 的 某 些 位 置 的 单元 格 ， 删 除 对 应 序号 的 单元 格 。 如 要 合 
并 1 号 和 2 号 ， 则 要 先 删除 2 号 单元 格 ， 在 代码 中 表现 为 第 10 行 代码 。 之 后 再 定义 将 1 号 和 2 号 单元 
格 同行 内 合并 。 同 样 ， 合 并 一 列 中 的 单元 格 也 是 这 样 。 本 例 中 注意 第 30 行 和 第 32 行 代码 的 colspan 
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合并 表格 单元 格 后 


8.6 合并 表格 单元 格 


和 rowspan 的 用 法 。 


人 
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注意 : 如 果 合 并 错误 位 置 的 单元 格 ， 则 colspan 和 rowspan 不 起 作用 。 
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8.2.4 表格 标题 


使 用 <caption> 标 签 给 表格 添加 标题 ， 这 个 标签 放 入 在 <table> 标 签 中 ， 写 法 是 : 


<table> 
<caption> 表 格 的 名 字 </caption> 


<caption> 表 示 标 签 添加 的 标题 ， 默 认 情况 下 在 表格 上 方 居中 的 位 置 ， 它 会 根据 不 同 表格 的 宽度 来 
改变 位 置 。 
8.2.5” 拆 分 表格 


为 了 便于 将 表格 定位 给 CSS 样式 表 ， 有 时 不 希望 代码 中 一 直 都 是 <tr> 标 签 ， 可 以 使 用 thead、tfoot、 
tbody 来 拆 分 表格 。thead 定义 了 表格 的 首 行 ，tfoot 定义 了 表格 的 尾行 。 这 里 有 意思 的 是 ， 如 果 使 用 了 
其 中 一 个 ， 那 么 全 部 元 素 都 要 用 上 。 而 且 它们 的 出 现 次 序 是 thead、tfoot、tbody， 如 以 下 代码 所 示 : 


首先 是 thead 


<td>thead</td> 
<td>thead</td> 


然后 是 tfoot 


<td>tfoot</td> 
<td>tfoot</td> 


最 后 是 tbody 


<td>tbody</td> 
<td>tbody</td> 


| 说 明 : tbody 可 以 出 现 多 次 ， 但 thead 和 tfoot 只 能 使 用 一 次 。 
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使 用 这 种 写法 还 有 个 优点 在 于 ， 如 果 工 作 中 制作 某 些 表格 长 度 超出 一 页 的 范畴 ， 当 打印 表格 时 ， 
表格 的 表 头 和 页 脚 将 会 被 打印 在 包含 表格 数据 的 每 张 页 面 上 。 


8.2.6 设置 表格 的 列 
虽然 HTML 页 面 中 表格 是 按照 一 行 一 行 这 样 的 概念 建立 起 来 的 ， 但 是 可 以 使 用 <colgroup> 定 义 表 


表示 为 表格 中 一 个 或 多 个 列 定义 属性 值 ， 是 仅 包含 属性 的 空 元 素 ， 只 能 在 表格 或 colgroup 中 使 用 此 元 
素 。 如 程序 8.3 中 使 用 的 <colgroup> 和 <col> 定 义 表格 的 列 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 8 章 \8-3 ”使 用 <colgroup> 和 <col> 定 义 表格 的 列 .html】。 

【实例 8-3】 使 用 <colgroup> 和 <col> 定 义 表格 的 列 ， 其 源码 展示 如 下 : 


程序 8.3 使 用 <colgroup> 和 <col> 定 义 表格 的 列 .html 


01 <html> 

02 <head> 

03 <title> 使 用 <colgroup> 和 <col> 定 义 表格 的 列 </title> 
04 <style type="text/css"> 


05 caption { font-weight:bold; color:#000; 

06 } 人 通过 样式 表 来 修饰 表格 */ 

07 .One { background:cyan; text-align: center; } 

08 .two { background:ffee22; text-align: center; } 

09 three { background: silver' text-align: center; } 

10 .four{ background: #F1B005; text-align: center; } 
11 </style> 

12 </head> 

13 <body> 


14 <table width="500" height="280" border="1"> 
15 <caption> 使 用 "colgroup" 和 "col" 定 义 表 格 的 列 
16 </caption> 


17 

18 <colgroup> 

19 <col class="two"></col> 
20 <col class="three"></col> 
21 <col class="four"></col> 
2 /colgroup> 

23 

24 <tr> 

25 <th> 排 名 </td> 
3 
28 <th> 铜 牌 </th> 

29 </tr> 

30 <tr> 
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<td> 中 国 </td> 
<td>51</td> 
<td>21</td> 
<td>28</td> 
<tr> 
<td> 美 国 </td> 
<td>36</td> 
<td>38</td> 
<td>36</td> 
</tr> 
<tr> 


<td> 俄 罗斯 </td> 


<td>23</td> 
<td>21</td> 
<td>28</td> 
</tr> 
</table> 
</body> 
</html> 


【运行 程序 】 结 果 如 图 8.7 所 示 。 
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图 8.7 使 用 colgroup 和 col 定义 表格 的 列 


| 主 > 注意 :这 里 可 以 看 到 ， 表 格 标题 是 在 表格 上 方 居中 的 位 置 。 


【深入 学 习 】 这 是 一 个 使 用 CSS 样式 表 来 改变 表格 列 的 背景 颜色 ， 当 在 <style> 标 签 中 定义 好 4 个 
样式 表 之 后 ， 把 <colgroup> 和 <col> 放 在 一 起 ， 调 用 这 些 样 式 表 来 改变 表格 中 每 一 列 的 颜色 。 
此 外 ， 还 可 以 和 span 属性 配合 使 用 ， 那 么 代码 应 该 写成 : 
<table> 
<colgroup span="3" class="one" 
</ colgroup> 


“ians 


CSS mx ati 


这 种 方法 不 同 于 前 一 种 的 是 , 它 表示 前 3 列 而 不 是 第 3 列 ,所 以 最 后 在 页 面 中 的 结果 如 图 8.8 所 示 。 
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使 用 "colgroup“ 和 ”span“ 定 义 表格 的 列 
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图 8.8 使 用 colgroup 和 span 定义 表格 的 列 
8.3 修饰 单元 格 


当 了 解 了 表格 的 构建 原理 之 后 ， 进 一 步 讨 论 的 是 如 何 使 设计 的 表格 更 美观 一 些 。 表 格 是 由 一 个 一 
个 的 单元 格 组 成 的 ， 美 化 表格 的 要 点 就 在 于 如 何 去 美 化 这 些 单元 格 。 谈 到 修饰 ， 最 好 的 方法 还 是 依赖 
使 用 样式 表 。 设 计 者 可 以 利用 很 多 优秀 的 属性 彻底 改变 表格 的 样式 。 
8.3.1 通过 CSS 修饰 单元 格 的 边框 


修改 边框 可 以 使 用 border 属性 ， 其 不 仅 可 以 修改 边框 的 粗细 ， 也 能 修改 边框 的 颜色 和 样式 。 默 认 
情况 下 ,边框 的 值 是 0， 即 没有 边框 。 边 框 颜色 和 文本 颜色 默认 情况 下 是 相同 的 。 一 个 标准 的 边框 定义 
在 样式 表 中 可 以 写成 这 样 : 

border:2px solid red; 

表示 边框 的 宽度 是 2px， 红 色 实 体 的 线 。 具 体 如 何 使 用 到 表格 中 ， 如 程序 8.4 所 示 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 8 章 \8-4 ”修改 表格 的 边框 .html】 

【实例 8-4】 修 改 表格 的 边框 ， 其 源码 展示 如 下 


程序 8.4 修改 表格 的 边框 .html 


01 <html> 

02 <head> 

03 <title> 修 改 表 格 的 边框 </title> 
04 <styletype="text/css"> 


05 table {border:5px blue; // 设 置 表格 边框 样式 
06 } 

07 .dotted {border: 3px dotted; /点 状 的 边框 

08 } 

09 .dashed {border: 3px dashed; /断断续续 的 边框 
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10 
11 .double {border: 3px double; // 双 线 的 边框 
12 和 

13 groove {border: 3px groove; /外 阴影 的 边框 
14 由 

人 </style> 

16 </head> 

17 <body> 

18 <table width="462" height="242" border="2"> 

19 <tr> 

20 <td class="dotted">dotted</td> 

21 <td class="dashed">dashed</td> 

22 </tr> 

23 <tr> 

24 <td class="double">double</td> 

25 <td class="groove">groove</td> 

26 

27 </body> 

28 </html> 


【运行 程序 】 本 例 中 介绍 了 如 何 使 用 样式 表 作用 于 表格 的 边框 ， 同 时 也 展示 了 不 同 边框 的 样式 粗 
细 颜 色 ， 结 果 如 图 8.9 所 示 。 
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8.9 表格 边框 的 样式 


说 明 : 为 了 节约 页 面 ， 这 个 例子 中 只 列 出 了 其 中 4 种 边框 的 代码 写法 ， 而 图 中 8 种 样式 边 
框 的 源码 可 以 在 资料 盘 中 查找 到 。 


【深入 学 习 】 此 外 ， 设 计 者 还 可 以 分 别针 对 一 个 单元 格 的 每 一 条 边 进行 定义 ， 如 果 这 样 写 : 

{ border-left:2px dotted; } 

那么 在 浏览 器 中 ， 这 个 声明 值 针对 于 左边 的 边框 。 依 此 类 推 ， 还 有 border-top、border-right 和 
border-bottom， 它 们 分 别 表示 单元 格 的 上 边 、 右 边 和 底 边 。 
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8.3.2 合并 相 邻 单元 格 

<table> 标 签 制定 的 表格 会 在 所 有 的 单元 格 之 外 ， 再 框 上 一 个 “四 边 形 ”， 而 每 一 个 单元 格 又 是 独 
立 存在 的 。 所 以 单元 格 和 单元 格 之 间 总 像 是 有 一 条 缝 除 ， 有 一 种 方式 可 以 消除 这 条 缝 除 ， 即 使 用 “ 边 
框 挤 压 ”的 属性 ， 如 下 代码 所 示 : 

{ border-collapse: collapse;} 

如 果 将 它 运 用 于 表格 中 ， 如 程序 8.5 所 示 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 8 章 \8-5 合并 单元 格 之 间 的 边框 .html】 

【实例 8-5】 合 并 单元 格 之 间 的 边框 ， 其 源码 展示 如 下 : 

程序 8.5 合并 单元 格 之 间 的 边框 .html 


01 <head> 
02 ”<title> 修 改 表格 的 边框 </title> 
03 <style type="text/css"> 


04 <caption> 合 并 单元 格 之 间 的 边框 
05 </caption> 

06 table.one {border-collapse: collapse; 
07 border#0099CC 

08 } 

09 </style> 

10 </head> 

11 <body> 

12 <table width="191" height="129" border="2" class="one"> 
13 <tr bordercolor="#0099CC"> 
14 <td width="87">Hui</td> 
15 <td width="86">Bobo</td> 
16 </tr> 

17 <tr bordercolor="#0099CC"> 
18 <td>Huiji</td> 

19 <td>Jhn</td> 

20 </tr> 

21 </table> 

22 </body> 


【运行 程序 】 结 果 如 图 8.10 所 示 。 

【深入 学 习 】 这 样 ， 单 元 格 和 单元 格 之 间 的 缝隙 就 消除 了 。 此 外 ，“ 边 框 挤 压 ”中 还 可 以 写成 
“{border-collapse: separate;}”， 表 示 为 单元 格 之 间 分 离 。 此 外 ,还 有 一 个 border-spacing 属性 具有 类 似 
功能 ， 使 用 它 可 以 控制 单元 格 之 间 的 距离 ， 但 是 很 可 惜 ， 这 一 属性 并 不 能 被 一 些 主流 浏览 器 接受 ， 如 
IE、Firefox 浏览 器 。 
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图 8.10 合并 单元 格 之 间 的 边框 
8.4 编辑 单元 格 中 的 内 容 


表格 是 由 许多 个 单元 格 组 成 的 ， 而 这 些 单元 格 中 又 可 以 放 入 多 种 类 型 的 页 面 内 容 ， 如 文本 、 图 像 
或 超 链接 等 ， 甚 至 可 以 再 放 入 新 的 表格 。 这 种 表格 的 嵌 套 曾经 是 非常 流行 的 布局 页 面 的 方法 ， 只 是 这 
种 方法 太 过 繁琐 。 通 过 样式 表 来 修饰 表格 中 的 内 容 就 容易 多 了 。 


8.4.1 单元 格 中 文本 与 单元 格 大 小 


单元 格 的 大 小 会 随 着 格 内 文本 的 长 度 自行 缩放 。 虽 然 通过 数值 可 以 固定 单元 格 的 大 小 ， 但 是 如 果 
文本 的 长 度 超过 所 设置 的 单元 格 长 度 ， 那 么 依然 会 根据 文本 的 长 度 来 做 决定 。 使 用 table-layout 属性 可 
以 限制 单元 格 随 文本 长 度 而 改变 ， 如 下 代码 所 示 : 

{table-layout : fixed;} 

这 样 带 来 的 好 处 是 浏览 器 可 以 更 快 地 演 染 出 表格 。 因 为 当 浏览 器 解析 到 表格 的 第 一 行 时 ， 就 能 确 
定 所 有 单元 格 的 大 小 。 使 用 时 ， 需 要 在 代码 中 给 出 确定 的 长 度数 值 ， 如 第 一 行 的 td 或 h， 如 程序 8.6 
所 示 为 如 何 限制 单元 格 的 大 小 。 

【本 节 示 例 参考 ， 资 料 光盘 \ 第 8 章 \8-6 ”限制 单元 格 大 小 .html】 

【实例 8-6】 限 制 单元 格 大 小 ， 其 源码 展示 如 下 : 


程序 8.6 ”限制 单元 格 大 小 .html 
01 <html> 
02 <head> 
03 <title> 限 制 单元 格 大 小 </title> 
04 <style type="text/css"> 


05 table {table-layout: fixed: /| 表格 单元 格 的 限制 
06 } 
07 </style> 
08 </head> 
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09 <body> 
10 <table border="2"> 
11 <tr> 
12 <td width="100" > 页 面 文本 1</td> 
13 <td width="100" > 页 面 文 本 2</td> 
14 </tr> 
15 <tr> 
16 <td > 博客 社 博客 社 博客 社 博客 社 博客 社 </td> 
17 <td ></td> 
18 </tr> 
19 </body> 
20 </html> 
【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 8.11 所 示 。 
布 根 制 再 元 冤 天 未 WECrosoW internet Pxplbrer a 书 因 
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页 面 文 本 1 页 面 文本 2 
博客 社 请 客 社 
博客 社 清 客 社 ”博客 社 
博客 社 


} 


由 于 长 度 受到 限制 ， 文 本 跳 入 
下 一 行 


E29 壮实 的 电脑 


图 8.11 限制 单元 格 大 小 


说 明 : 有 些 浏览 器 不 能 很 好 地 支持 table-layout 属性 ， 所 以 使 用 时 要 留心 。 


8.4.2 修饰 单元 格 中 的 内 容 


通过 CSS 定义 单元 格 中 的 文本 时 ， 可 以 专门 地 指定 给 某 一 行 、 某 一 列 ， 或 者 是 整个 表格 ， 如 文本 
颜色 、 背 景 、 背 景 图 片 等 。 例 如 : 
td { text-align:center; 
font:.7em 幼 圆 ; 
Color:#334542; 
background-color:#ddd; 
} 
样式 表 中 可 放 入 的 属性 有 很 多 ， 也 有 一 些 是 专门 属于 表格 的 样式 表 ， 如 表 8.1 所 示 ， 有 兴趣 的 读者 
可 以 尝试 一 下 效果 。 
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表 8.1 修饰 表格 的 一 些 属性 


属 性 作用 
border 所 有 4 个 边 的 属性 设置 在 一 个 声明 中 
border-style 设置 元 素 所 有 边框 的 样式 ， 或 者 单独 地 为 各 边 设置 边框 样式 
border-color 设置 边框 中 可 见 部 分 的 颜色 ， 或 为 4 个 边 分 别 设置 颜色 
border-width 为 元 素 的 所 有 边框 设置 宽度 ， 或 者 单独 地 为 各 边框 设置 宽度 
border-bottom 针对 于 下 边框 的 所 有 属性 设置 到 一 个 声明 中 
border-bottom-color 设置 元 素 的 下 边框 颜色 
border-bottom-style 设置 元 素 的 下 边框 样式 
border-bottom-width 设置 元 素 的 下 边框 宽度 
border-left 针对 于 左边 框 的 所 有 属性 设置 到 一 个 声明 中 
border-left-color 设置 元 素 的 左边 框 颜 色 
border-left-style 设置 元 素 的 左边 框 样式 
border-left-width 设置 元 素 的 左边 框 宽度 
border-right 针对 于 右边 框 的 所 有 属性 设置 到 一 个 声明 中 
border-right-color 设置 元 素 的 右边 框 颜色 
border-right-style 设置 元 素 的 右边 框 样式 
border-right-width 设置 元 素 的 右边 框 宽度 
border-top 针对 于 上 边框 的 所 有 属性 设置 到 一 个 声明 中 
border-top-color 设置 元 素 的 上 边框 颜色 
border-top-style 设置 元 素 的 上 边框 样式 
border-top-width 设置 元 素 的 上 边框 宽度 


border-collapse 
border-spacing 
caption-side 
empty-cells 
table-layout 


设置 是 否 把 表格 边框 合并 为 单一 的 边框 

设置 分 隔 单元 格 边框 的 距离 〈 仅 用 于 separated borders 模 型 ) 
设置 表格 标题 的 位 置 

设置 是 否 显示 表格 中 的 空 单元 格 〈 仅 用 于 separated borders 模 型 ) 
设置 显示 单元 、 行 和 列 的 算法 


8.5 案例 : 制作 球赛 积分 表 


足球 是 一 项 如 此 有 魅力 的 比赛 ， 每 当 大 赛 来 临 ， 都 能 吸引 一 大 批 狂 热 的 球迷 ， 每 每 看 到 大 赛 的 
时 间 表 、 积 分 表 都 显得 特别 有 活力 。 下 面 的 例子 中 将 介绍 如 何 用 表格 制作 出 一 个 鲜亮 的 球赛 积分 表 ， 
如 程序 8.7 所 示 。 可 以 把 它 放 在 个 人 博客 上 或 是 个 人 网 站 内 ， 借 助 它 和 其 他 球 友 们 一 起 享受 球迷 的 


生活 。 


【本 节 示 例 参考 : 资料 光盘 \ 第 8 章 \8-7 ”制作 球赛 积分 表 .html】 
【实例 8-7】 制 作 球赛 积分 表 ， 其 源码 展示 如 下 : 
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程序 8.7 ”制作 球赛 积分 表 .html 


001 <html> 

002 <head> 

003 <title> 制 作 球 赛 积分 表 </title> 
004 <style type="text/css"> 


005 |#messi { 

006 width:700px; 

007 border-collapse:collapse; 以 messi 命名 的 样式 表 定 义 了 
008 人 下 本 “西甲 ”部 分 的 表格 样式 

009 text-align:center' 

010 margin:0px auto; 

011 


012 #messi caption { 

013 border-weight:bold; 

014 padding:6px Opx; 

015 color:#3D580B; 

016 font-size:25px; 

017 } 

018 #messith,td { 

019 border:1px solid #aaa; 

020 和 

021 #messi thead th { 

022 border-bottom:2px solid #3D580B; 
023 background-color:-#8FC629; 
024 Color-#fff; 

025 padding:5px Opx; 

026 } 

027 #messith.title { 

028 background-color:#E3E685; 


029 } 

030 #messith{ 

031 background-color:#F2F4B9; 
032 } 

033 #messi tfoot td { 

034 border-width:0px:; 


035 text-align:right; 
036 font-size:12px; 
037 Color:#777:; 
038 } 


a rr 以 kaka 命名 的 样式 表 定 义 了 
此 Kaka tn.ttle 本 这 8 到 
042 


043 #kakath{ 
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044 background-color-#ffe8ae; 
045 i 
046 |#cr th.title { 


以 cr 命名 的 样式 表 定义 了 “ 英 
超 ” 部 分 的 表格 样式 


047 background-color:#FFCC33; 
048 } 

049 #crth{ 

050 background-color-#fff255; 
051 } 

052 </style> 

053 </head> 

054 

055 <body> 


056 <table id="messi"> 

057 <caption> 欧 洲 豪门 最 新 积分 榜 (截止 到 2008-09-14)</caption> 
058 <thead> 

059 <tr> 

060 <th> 球 队 </th> 

061 <th> 胜 &nbsp;&nbsp;&nbsp;</th> 

062 <th> 平 &nbsp;&nbsp;&nbsp;</th> 

063 <th> 负 &nbsp;&nbsp;&nbsp;</th> 

064 <th> 积 分 </th> 

065 <th> 排 名 </th> 


066 </tr> 

067 </thead> 

068 <tfoot> 

069 <tr> 

070 <td colspan="6">zhaohui </td> 
071 </tr> 

072 </tfoot> 

073 <tbody> 

074 <tr> 

075 <th colspan="6" class="title"> 西 班 牙 甲 级 联赛 </th> 
076 </tr> 

077 <tr> 


078 <th> 皇 家 马德里 </th> 
079 <td>0</td> 

080 <td>0</td> 

081 <td>1</td> 

082 <td>0</td> 

083 <td>15</td> 

084 </tr> 

085 <tr> 

086 <th> 巴 塞 罗 那 </th> 
087 <td>0</td> 

088 <td>1</td> 

089 <td>1</td> 
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090 <td>1</td> 
091 <td>14</td> 
092 </tr> 

093 <tr> 

094 <th> 瓦 伦 西 亚 </th> 
095 <td>1</td> 
096 <td>0</td> 
097 <td>0</td> 
098 <td>3</td> 
099 <td>3</td> 
100 </tr> 

101 </tbody> 

I 

166 </tbody> 

167 </table> 
168 </body> 


【运行 程序 】 其 中 ， 第 1 一 54 行 代码 是 设 定好 的 CSS 样式 表 的 头 部 ，id 命名 为 messi、kaka 和 cr 
的 样式 表 分 别 代 表 了 “西甲 ”、“ 意 甲 ” 和 “英超 ”这 3 部 分 表格 。 在 它们 各 自 的 扩展 下 ， 又 定义 了 
一 系列 针对 表 头 、 单 元 格 的 样式 表 。 第 55 一 169 行 代码 是 将 样式 表 应 用 于 表格 中 的 不 同 内 容 中 ， 结 果 
如 图 8.12 所 示 。 


8.12 ”制作 球赛 积分 表 


【深入 学 习 】 这 个 例子 中 ， 要 注意 样式 表 是 绑 定 在 哪些 对 象 上 的 ， 如 代码 第 21 一 26 行 ， 作 用 于 图 
中 “ 球 队 、 胜 、 平 …” 这 一 行 。 第 18 一 20 行 中 的 代码 “#messi th,td”， 定 义 了 表格 中 所 有 边框 的 样式 。 
注意 在 这 个 声明 中 是 一 个 逗号 ， 而 非 点 号 。 第 75 行 代码 使 用 colspan 属性 设置 了 “西班牙 甲 级 联赛 ” 
文本 的 样式 ， 类 似 这 样 的 用 法 还 有 第 104 行 和 第 132 行 代码 。 


8.6 小 结 


本 章 介绍 了 表格 的 用 法 ， 可 以 发 现 ， 设 置 表格 的 方法 不 难 ， 但 是 表格 缺少 一 些 固定 的 规律 ， 编 辑 
的 方式 多 而 灵活 。 由 于 不 同 浏览 器 支持 的 效果 大 不 相同 ， 所 以 表格 一 直 是 比较 难 控制 的 一 样 东西 。 好 
在 现在 设计 者 不 用 再 考虑 用 表格 来 布局 页 面 了 ， 虽 然 偶 然 也 会 使 用 ， 但 是 更 多 的 时 候 ， 表 格 只 是 用 来 
制作 表格 。 本 章 主要 的 知识 点 有 : 
构建 表格 的 方式 。 
控制 表格 的 行 高 宽度 ， 以 及 单元 格 。 
使 用 <caption> 设 置 表格 的 标题 。 
为 了 更 方便 应 用 CSS， 将 表格 拆 分 为 表 头 、 表 尾 和 表 体 。 
合并 单元 格 ， 改 变 单元 格 边框 样式 。 
控制 表格 的 列 。 
编辑 修饰 单元 格 中 的 内 容 。 
通过 实例 学 习 如 何 综合 运用 CSS 样式 表 来 制作 一 个 表格 。 
表格 的 用 途 很 广 ， 是 页 面 中 最 常见 的 内 容 之 一 ， 希 望 读者 多 加 练习 。 
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框架 指 的 是 页 面 的 一 种 布局 ， 这 种 布局 和 之 前 提 到 的 “表格 布局 ”以 及 之 后 将 学 习 的 “CSS+DIV” 
布局 都 是 不 同 的 。 那 么 具体 框架 布局 是 怎样 的 呢 ? 事实 上 ， 框 架 布局 也 许 缺 少 了 那么 一 些 灵活 性 ， 但 
它 的 特点 是 可 以 将 浏览 器 分 割 成 几 部 分 ， 这 是 其 他 标签 无 法 做 到 的 ， 本 章 将 介绍 的 便 是 这 种 技能 。 本 
章 主要 的 知识 点 如 下 。 
学 习 如 何 创 建 框架 集 。 
掌握 基本 的 页 面 布局 。 
通过 一 些 属性 修饰 框架 。 
学 习 如 何在 框架 中 实现 页 面 链接 以 及 锚 点 链接 。 
创建 浮动 框架 。 


OOOODO 


9.1 创建 窗口 框架 页 面 


有 这 样 一 种 网 页 ， 导 航 栏 放 在 左 侧 ， 右 侧 是 页 面 主体 ， 当 浏览 者 单 击 左 侧 导 航 栏 时 ， 右 侧 的 页 面 
会 刷新 ， 但 是 左 侧 导航 栏 部 分 依然 保持 不 变 。 如 图 9.1 所 示 是 一 个 常见 的 论坛 导航 页 面 。 
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图 9.1 使 用 框架 的 页 面 
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类 似 这 样 形式 的 论坛 非常 多 ， 左 侧 是 导航 栏 ， 右 侧 是 论坛 主体 。 单 击 左 侧 导 航 栏 ， 则 在 网 页 的 右 
侧 显示 链接 页 面 ， 这 个 布局 是 将 浏览 器 分 为 左右 两 部 分 。 使 用 者 可 以 在 导航 栏 中 查找 目录 ， 在 右 侧 的 


主页 中 刷新 不 同 的 页 面 。 
9.1.1 创建 窗口 框架 的 <frameset> 和 <frame> 标 签 


使 用 <frame> 框 架 在 HTML 页 面 中 设置 框架 。 那 么 ， 当 一 个 浏览 器 被 分 成 很 多 个 框架 时 ， 这 些 框 
架 放 在 一 起 ， 即 称 之 为 框架 集 。 框 架 集 的 HTML 标签 为 <frameset>， 也 称 之 为 框架 结构 标签 。 所 以 ， 
如 果 要 在 框架 中 放 入 内 容 ， 采 用 的 方式 是 通过 引用 所 放 内 容 的 路 径 来 加 载 对 象 。 它 的 代码 如 下 所 示 : 
<frameset ......> /表明 这 是 一 个 框架 集 


<frame src=...> /这 是 其 中 一 个 框架 中 的 页 面 路 径 
<frame src=...> 


</frameset> 

需要 注意 的 是 ， 不 能 将 <frameset> 标 签 和 <body> 标 签 一 起 使 用 。 原 理 上 ， 因 为 框架 集 分 割 的 是 浏览 
器 ， 也 就 是 说 ， 框 架 集 至 少 也 需要 由 两 个 框架 组 成 。 所 以 ， 不 存在 只 有 一 个 框架 的 页 面 。 而 且 ， 框 架 
集 的 作用 是 将 多 个 页 面 同 时 展示 在 浏览 器 中 ， 同 样 ， 也 不 存在 包含 框架 的 独立 页 面 。 因 此 ，<frameset> 
标签 和 <frame> 标 签 是 不 能 放 在 <body> 标 签 内 的 ， 这 样 做 没有 意义 。 
9.1.2 ”横向 分 割 窗口 


窗口 的 分 割 只 有 横 纵 两 个 方向 ， 没 有 和 斜 方向 的 分 割 方法 。 横 向 分 割 窗口 ， 使 用 rows 属性 。 代 码 如 


下 所 示 : 


<frameset rows=" 框 架 高 度 ,框架 高 度 ,.…*"> 
口 框架 高 度 : 可 以 使 用 百分比 或 者 像素 来 表示 。 


口 


*: 表示 最 后 一 个 框架 的 高 度 ， 即 剩 下 来 的 最 后 一 个 ， 也 就 无 须 再 用 数值 表示 。 


这 里 通过 一 个 例子 来 说 明 如 何 实现 使 用 框架 横向 分 割 窗 口 。 例 如 , 程序 9.1 中 横向 分 割 窗 口 的 页 面 


代码 。 


【本 节 示 例 参考 : 资料 光盘 \ 第 9 章 \9-1 横向 分 割 窗口 .html】 
【实例 9-1】 横 向 分 割 窗口 的 方法 ， 其 源码 展示 如 下 : 


程序 9.1 横向 分 割 窗口 .html 


<html > 


<head> 
<title> 横 向 分 割 窗口 </title> 
</head> 
< 一 以 下 部 分 是 框架 集 一 > 
<frameset rows="40%,409%,” > // 划 分 不 同 大 小 的 框架 
<frame ></frame > 
<frame ></frame > 
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09 <frame ></frame > 
10 </frameset> 
11 </html>> 


【运行 程序 】 最 终 页 面 结果 如 图 9.2 所 示 。 


20% 
图 9.2 横向 分 割 窗口 


注意 : 代码 “<frameset rows="40%,40%,*" >” 最 后 位 的 星 号 符 ,浏览 器 会 默认 为 是 剩 下 的 


框架 区 域 ， 在 此 例 中 即 为 20%。 


可 以 看 出 ， 最 下 面 的 一 栏 被 默认 定义 为 20%， 事 实 上 ， 这 也 是 设计 者 希望 看 到 的 结果 。 
9.1.3 ”纵向 分 割 窗口 


除去 横向 分 割 窗口 ， 另 一 种 形式 则 是 纵向 分 割 窗口 。 当 纵向 分 割 窗 口 时 ， 使 用 的 是 cols 属性 。 同 
用 百分比 或 者 像素 都 可 以 来 表示 框架 横向 的 宽度 。 如 程序 9.2 所 示 的 纵向 分 割 窗 口 。 
【本 节 示 例 参考 : 资料 光盘 \ 第 9 章 \9-2 ”纵向 分 割 窗口 .html】 
【实例 9-2】 纵 向 分 割 窗口 的 方法 ， 其 源码 展示 如 下 : 
程序 9.2 纵向 分 割 窗口 .html 


样 


01 <html> 

02 <head> 

03 <title> 纵 向 分 割 窗 口 </title> 
04 </head> 

05 < 一 以 下 部 分 是 框架 集 一 > 
06 <framesetcols="20%,40%,*"> // 划 分 不 同 大 小 的 框架 
07 <frame ></frame > 

08 <frame ></frame > 

09 <frame ></frame > 

10 </frameset> 

11 </html>> 
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【运行 程序 】 结 果 如 图 9.3 所 示 。 


20% 40% 


图 9.3 纵向 分 割 窗口 


确 地 关闭 。 


全 注意 : 在 HTML 中 ，<frame> 标 签 不 需要 关闭 ， 但 是 在 XHTML 中 ，<frame> 标 签 必须 被 正 


9.1.4 


框架 藤 套 就 是 说 如 果 同 时 混合 使 用 横 纵 结构 。 即 在 分 隔 号 的 框架 中 进行 新 的 窗口 分 割 ， 之 后 将 这 
个 框架 替换 成 一 个 新 的 框架 集 。 那 么 ， 写 法 上 只 要 在 <frameset> 标 签 中 再 放 入 <frameset> 标 签 即 可 。 如 
程序 9.3 所 示 是 一 个 简单 的 框架 嵌 套 的 页 面 代码 。 


【本 节 示 例 参考 : 资料 光盘 \ 第 9 章 \9-3 ”框架 的 赃 套 .html】 


【实例 9-3】 框 架 谈 套 的 方法 ， 其 源码 展示 如 下 : 


程序 9.3 框架 的 嵌 套 .html 


<title> 框 架 的 庶 套 </title> 


<!-- 以 下 部 分 是 框架 集 -> 
<frameset cols="25%,*%"> 
<frame> 
<frameset rows="40%,*%"> 


<frame> 
<frame> 
</frameset> 


</frameset> 
13 </html>> 


【运行 程序 】 结 果 如 图 9.4 所 示 。 


“143. 


// 划 分 不 同 大 小 的 框架 


CSS mgt 


【深入 学 习 】 代 码 第 8 一 11 行 ， 是 一 个 新 的 框架 集 。 同 时 ， 这 个 框架 集 可 以 看 成 是 大 框架 下 的 一 
个 子 框架 。 这 是 一 个 先 纵向 分 割 ， 接 着 在 子 框 架 中 横向 分 割 的 案例 。 如 果 代 码 第 6 行 和 第 8 行 交 换 一 
下 ， 则 效果 显示 如 图 9.5 所 示 。 


右 侧 栏 上 部 分 的 40% 40% 
20% 
下 方 框架 下 方 框架 
侧 = 分 J60% 
右 侧 栏 下 部 分 的 nl she 
本 ml 世 | 
图 9.4 峰 套 的 框架 布局 一 图 9.5 嵌 套 的 框架 布局 二 


图 9.5 所 示 为 先 横向 分 割 ， 接 着 在 子 框架 中 纵向 分 割 窗口 的 效果 。 所 以 页 面 发 生 了 变化 。 这 是 两 种 
最 常见 的 框架 布局 结构 ， 第 一 种 是 左右 布局 的 页 面 ， 第 二 种 则 是 上 下 布局 的 页 面 。 异 曲 同 工 ， 从 这 个 
改变 中 可 以 看 到 页 面 设计 的 魅力 。 
9.1.5 将 页 面 放 入 窗口 框架 中 

将 页 面 放 入 窗口 框架 中 ， 需 要 在 每 一 个 框架 中 通过 路 径 的 方式 来 添加 页 面 。 如 图 9.5 所 示 , 若 一 个 
框架 集中 包含 3 个 框架 ， 那 意味 着 要 准备 3 个 页 面 分 别 放 入 相应 的 框架 中 。 这 里 通过 一 个 例子 来 说 明 
如 何 将 页 面 加 入 框架 集 。 准 备 3 个 页 面 red.html、white.html 和 blue.html。 具 体 的 方法 如 程序 9.4 所 示 。 

【本 节 示 例 参考 ; 资料 光盘 \ 第 9 章 \9-4 ”将 页 面 放 入 到 窗口 框架 中 .html】 


说 明 : 每 一 个 框架 对 应 着 一 个 页 面 。 所 以 ， 如 果 窗 口中 划分 太 多 框架 ， 也 是 一 种 不 妥当 的 


【实例 9-4】 将 页 面 放 入 到 窗口 框架 中 ， 其 源码 展示 如 下 : 
程序 9.4 ”将 页 面 放 入 到 窗口 框架 中 .html 


01 <html> 

02 <head> 

03 <title> 将 页 面 放 入 到 窗口 框架 中 </title> 

04 </head> 

05 <frameset rows="40%,*%"> // 这 是 框架 集 

06 <frame src="red.html"> // 通 过 路 径 ， 引 入 red 页 面 
07 <frameset cols="38.2%,*%"> /这 是 子 框架 集 

08 <frame src=" 复 件 white .html"> ”// 通 过 路 径 ， 引 入 white 页 面 
09 <frame src="blue.html"> // 通 过 路 径 ， 引 入 blue 页 面 
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10 </frameset> 
11 </frameset> 
12 </html>> 
【运行 程序 】 结 果 如 图 9.6 所 示 。 
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图 9.6 将 页 面 放 入 窗口 框架 中 

【深入 学 习 】 页 面 中 通过 src 属性 告诉 框架 与 其 相对 应 的 页 面 ， 并 且 将 页 面 添加 在 其 中 。 这 是 一 个 

上 下 分 割 的 页 面 ， 上 部 分 框架 中 是 背景 为 红色 的 页 面 。 而 下 部 分 框架 集中 ， 分 割 成 左右 框架 。 左 边 是 
背景 为 白色 的 页 面 ， 右 边 则 是 背景 为 蓝 色 的 页 面 。 


9.2 花 点 心思 修饰 框架 的 细节 


设计 页 面 没有 太 多 复杂 的 技术 ， 但 是 要 设计 出 优秀 的 页 面 ， a 于 对 于 细节 的 把 握 ， 也 就 是 所 
谓 的 “细节 出 大 师 ”。 在 设计 这 一 领域 中 细节 是 一 条 重要 的 准则 。 页 面 是 给 浏览 互联 网 的 用 户 提供 的 ， 
因此 ， 必 须要 考虑 页 面 给 使 用 者 的 友好 度 。 一 个 具有 人 下 深刻 的 
印象 。 

9.2.1 ”给 无 法 处 理 框 架 的 浏览 器 添加 注释 说 阴 

在 进行 框架 设计 的 页 面 时 ， 会 遇 到 不 能 显示 框架 的 浏览 器 。 在 这 种 情况 下 ， 可 以 使 用 <noframe> 标 
签 加 以 注释 。 如 程序 9.5 所 使 用 的 注释 方法 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 9 章 \9-5 ”使 用 <noframe> 标 签注 释 .html】 


【实例 9-5】 使 用 <noframe> 标 签注 释 ， 其 源码 展示 如 下 : 


程序 9.5 ”使 用 <noframe> 标 签注 释 .html 


01 <html> 
02 <frameset cols="20%,30%,*"> /1 划分 不 同 大 小 的 框架 
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03 <frame > 

04 <frame > 

05 <frame > 

06 <noframes> /用 来 声明 当 浏览 器 不 能 处 理 框架 时 的 情况 
07 <body> 很 抱 次 ， 您 的 浏览 器 无 法 处 理 框架 ! 

08 </body> 

09 </noframes> 

10 </frameset> 

11 </html> 


【深入 学 习 】 当 使 用 了 第 6 一 10 行 这 样 的 声明 ， 表 示 如 果 浏 览 器 无 法 处 理 框架 ， 则 <noframes> 标 
签 开 始 起 作用 。 屠 么 此 时 浏览 器 将 显示 <body> 标 签 的 内 容 。 告 诉 使 用 者 : “很 抱 菊 ， 您 的 浏览 器 无 法 
处 理 框架 ! ” 


说 明 : 在 目前 的 浏览 器 中 ， 大 部 分 都 能 正确 处 理 框架 。 


9.2.2 固定 框架 的 位 置 


在 <frameset> 标 签 的 框架 集中 ， 虽 然 框 架 的 位 置 是 按照 事先 设 定好 的 出 现在 浏览 器 中 ,但 是 框架 的 
边框 并 非 是 固定 的 ， 如 果 浏 览 者 拖 搜 框架 集 的 边框 ， 框 架 的 大 小 是 可 以 随意 改变 的 。 若 设计 者 希望 固 
定 框架 的 尺寸 ， 可 以 使 用 <noresize> 标 签 来 定位 边框 的 位 置 。 如 程序 9.6 的 页 面 ， 它 的 框架 是 固定 的 。 

【本 节 示 例 参考 ; 资料 光盘 \ 第 9 章 \9-6 ”使 用 <noresize> 标 签 固定 框架 的 位 置 .html】 

【实例 9-6】 使 用 <noresize> 标 签 固定 框架 的 位 置 ， 其 源码 展示 如 下 : 


程序 9.6 ”使 用 <noresize> 标 签 固定 框架 的 位 置 .html 


01 <html> 

02 <framesetrows="20%,30%,*"> // 划 分 框架 

03 <frame noresize="noresize" > /| 固定 框架 的 位 置 

04 <frame noresize="noresize" > 

05 <frameset cols="35%,25%,”> 

06 <frame noresize="noresize" src="red.html"> 

07 <frame noresize="noresize" src="blue.html"> 

08 </frameset> 

09 </frameset> 

10 </html> 

这 样 设 定之 后 ， 边 框 的 位 置 就 被 固定 住 了 ， 因 此 ， 框 架 的 尺寸 不 会 被 随意 地 改变 。 这 样 的 设 定 ， 
可 以 使 页 面 显得 更 工整 。 


9.2.3 ”框架 中 设置 滚动 条 
窗口 框架 中 有 个 细节 ， 当 页 面 中 的 内 容 超出 框架 的 范围 时 框架 的 底 边 会 出 现 滚动 条 。 这 个 滚动 条 
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也 是 可 以 设置 的 ， 通 过 scrolling 属性 可 以 实现 这 种 控制 。 实 现 它 的 方法 如 实例 9-7 所 示 。 
【本 节 示 例 参考 : 资料 光盘 \ 第 9 章 \9-7 ”设置 滚动 条 .html】 
【实例 9-7】 设 置 滚动 条 的 方法 ， 其 源码 展示 如 下 : 
程序 9.7 设置 滚动 条 .html 


01 <html > 
02 <head> 
03 <title> 设 置 滚动 条 </title> 
04 </head> 
05 <! 一 以 下 部 分 是 框架 集 --> 
06 <frameset rows="80%,*%"> 
07 <frame src=" 制 定 积分 表 .html" scrolling=auto> // 设 置 滚动 条 是 自动 的 
08 <frameset cols="38.2%,*%"> 
09 <frame src="white.html" scrolling=no > /设置 滚动 条 是 不 显示 的 
10 <frame src="blue.html" scrolling=yes > // 设 置 滚动 条 是 显示 的 
11 </frameset> 
12 </frameset> 
13 </html>> 
【运行 程序 】 如 图 9.7 所 示 的 页 面 中 标注 线 框 的 便 是 滚动 条 。 这 是 已 经 设置 好 的 滚动 条 样式 。 


BR Wd er Peleeer a) 
| Br hr te 四 站 本 | 
| ze we, am wa To won 

| 六 Borens 7 


欧洲 豪门 最 新 积分 榜 ( 蕉 止 到 2008-09-14) 


图 9.7 框架 中 的 滚动 条 


【深入 学 习 】 代 码 第 7、9、10 行 的 scrolling 属性 分 别 定义 为 auto、no 和 yes， 它 们 分 别 表明 不 同 
的 作用 。 
口 auto: 根据 页 面 的 内 容 是 否 超出 框架 范围 ， 而 决定 是 否 出 现 滚动 条 。 如 图 9.7 中 顶部 框架 中 页 
面 超出 了 框架 范围 ， 右 侧 和 边框 底部 都 出 现 了 滚动 条 。 
口 no: 表示 为 不 出 现 滚动 条 。 
口 yes: 表示 为 无 论 页 面 内 容 是 否 超出 框架 范围 ， 都 将 显示 滚动 条 。 如 图 9.7 中 页 面 的 下 方 右 侧 ， 
表现 为 灰色 的 滚动 条 。 
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9.3 修改 框架 边框 的 样式 


框架 的 边框 也 是 可 以 修改 的 ， 通 过 一 些 简单 的 属性 修饰 ， 可 以 改变 框架 边框 的 表现 形式 。 如 边框 
的 粗细 、 颜 色 ， 或 者 是 边框 的 边 距 。 使 用 这 些 特点 ， 可 以 作出 一 些 有 意思 的 页 面 效果 。 
9.3.1 判定 边框 是 否 显示 

在 有 些 情况 下 ， 灰 色 的 边框 会 很 麻烦 ， 看 上 去 像 把 页 面前 解 得 支离破碎 。 
以 决定 是 否 显示 边框 。 它 的 写法 是 : 

<frame frameborder="0" src=""> 

0 表示 不 显示 边框 ， 如 果 写 成 1， 则 是 显示 边框 。 如 图 9.8 所 示 为 程序 9.8 定义 的 不 显示 边框 的 页 面 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 9 章 \9-8 判定 边框 是 否 显示 .html】 

【实例 9-8】 判 定 边 框 是 否 显示 的 方法 ， 其 源码 展示 如 下 


使 用 frameborder 属性 可 


程序 9.8 判定 边框 是 否 显示 .html 


01 <html> 
02 <head> 
03 <title> 判 定 边框 是 否 显示 </title> 
04 </head> 
05 <frameset cols="50%,*" border="2px"> // 划 分 框架 大 小 
06 <frame frameborder="0" src="blue.html"> 
07 <frame frameborder="0" src="white.html" > 
08 </frameset> 
09 </html> 
【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 9.8 所 示 。 
古 刊 定 这 要 是 青 旺 示 Windbws IWiarnet Fxpiorer DE 
厦 书 箭 弟 ? 音 \ 亲 建文 不 广 外 | 关 Dl” 
文件 FF) 蝙 纺 (E] KY) 收 着 赤 A) 工具 mT 和 动人 
全 | 起 让 边 酝 是 下 旺 示 全 - 
white 有 无 边框 的 对 比 


轩 


9.8 ”有 无 边框 的 对 比 


“148 


第 9 章 创建 框架 结构 的 责 而 


注意 : 不 需要 边框 并 不 代表 边框 的 宽度 为 0， 例 子 中 边框 的 宽度 是 2px， 最 好 的 方法 是 同时 


设 定 边框 的 宽度 为 0。 


9.3.2 ”改变 边框 的 表现 效果 


border 表示 框架 的 边框 ， 在 这 个 属性 上 可 以 扩展 出 一 些 新 的 特性 ， 如 bordercolor 表示 修改 边框 的 
颜色 .。 通过 修改 border 扩展 的 一 些 属性 可 以 改变 边框 的 表现 效果 。 如 图 9.9 所 示 为 程序 9.9 中 修改 过 的 
边框 样式 。 

【本 节 示 例 参考 ， 资 料 光盘 \ 第 9 章 \9-9 ”改变 边框 的 表现 效果 .html】 
【实例 9-9】 改 变 边 框 的 表现 效果 ， 其 源码 展示 如 下 : 


程序 9.9 改变 边框 的 表现 效果 -html 


01 <html > 

02 <head> 

03 <title> 改 变 边 框 的 表现 效果 </title> 

04 </head> 

05 <frameset rows="30%,70%" border=23px bordercolor="#FF0000"> 
06 <! 一 定义 边框 宽度 为 23px， 边 框 颜色 是 红色 --> 

07 <frame > 

08 <frameset cols="40%,*" bordercolor="#000000"> 
09 <frame> 

10 <frame > 

11 </frameset> 

12 </html> 


【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 9.9 所 示 。 
ETT | 


二 mr x | 
| xm aa we eaxn TR wo | 


六 Bm 全 -日 总 - 小 曲 - "| 


图 9.9 改变 边框 的 表现 效果 


【深入 学 习 】 代 码 中 第 5 行 和 第 8 行 ， 定 义 了 页 面 中 框架 的 边框 的 宽度 为 23px， 分 别 是 红色 和 黑 
色 的 边框 。 
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二 绑 。 注意; 如果 在 先前 一 级 ， 如 第 5 行 中 定义 了 边框 的 宽度 ， 那 么 作为 嵌入 其 中 的 边框 ， 其 边 


框 宽度 会 跟随 上 一 级 。 即 第 8 行 虽然 没有 定义 边框 的 宽度 ， 但 是 浏览 器 会 默认 为 这 个 边框 宽度 是 23px。 


9.3.3 边框 的 边 距 


边 距 是 指 框架 内 页 面 内 容 离 边框 的 距离 。 使 用 marginwidth 属性 设置 左右 两 边 的 边 距 ， 使 用 
marginheight 属性 设置 上 下 两 边 的 边 距 。 如 图 9.10 所 示 为 运行 程序 9.10 后 的 效果 。 
【本 节 示 例 参考 : 资料 光盘 \ 第 9 章 \9-10 ”设置 边框 的 边 距 .html】 


【实例 9-10】 设 置 边框 的 边 距 ， 其 源码 展示 如 下 : 


程序 9.10 ”设置 边框 的 边 距 .html 


01 <html> 

02 <head> 

03 <title> 设 置 边 框 的 边 距 </title> 
04 </head> 


05 <frameset rows="30%,30%,*" > 
06 <frame src="red.html" marginwidth=50px >// 设 置 页 面 内 容 距离 边框 的 距离 是 50px 


07 <frame src="blue.html" marginwidth=100px > 
08 <frameset cols="40%,” > 
09 <frame src="red.html" marginheight=50px> 
10 <frame src=" 复 件 white.html" marginwidth=100px marginheight=50px> 
11 </frameset> 
12 </html> 
【运行 程序 】 最 终 在 浏览 器 中 的 显示 效果 如 图 9.10 所 示 。 
这 设 村 边框 的 边 距 - Windows Internet Explorer 局 D 因 
了 。 全 |X|| 利 FAs 书 村 \ 委 9 宇 \9-10 设置 边 村 的 | | 六] [全 搜 埋 pl 


文件 吕 。 篇 颖 (E) 查看 VW) 收藏 夫 轴 ”工具 中。 帮助 (H) 
乱 设 村 本 的 边 更 


1 S50px 
<—— white 
- 100px 


红 过 我 的 电大 100% 


图 9.10 设置 边框 的 边 距 
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说 明 : marginwidth 和 marginheight 是 两 个 很 有 实用 意义 的 标签 属性 ， 在 之 后 的 CSS+DIV 


布局 中 还 会 再 次 遇 到 。 


【深入 学 习 】 在 本 例 中 可 以 看 到 页 面 中 的 文本 。 例 如 ，red、blue 和 white 在 不 同 的 框架 中 ， 根 据 
不 同 框架 下 的 marginwidth 和 marginheight 属性 设置 ， 出 现在 不 同 的 位 置 。 这 是 一 种 很 好 的 布局 定位 的 
方式 。 


9.4 框架 集中 页 面 之 间 的 链接 
本 章 一 开始 ， 提 到 了 论坛 形式 的 页 面 ， 以 左边 为 导航 栏 、 右 边 为 页 面 的 主体 部 分 这 样 框架 集 下 的 
布局 页 面 。 在 本 节 中 ， 将 介绍 如 何 使 用 超 链接 配合 框架 的 特性 ， 制 作出 具有 特色 的 页 面 。 
9.4.1 在 指定 的 框架 中 打开 链接 


在 一 张 原始 的 页 面 如 图 9.11 所 示 中 ， 可 以 看 到 一 个 简单 的 页 面 导 航 是 如 何在 同一 个 窗口 中 实现 链 
接 的 。 


了 PET 


图 9.11 初始 页 面 
页 面 左 侧 是 一 个 表格 ， 依 次 写 着 “第 一 栏 显示 蓝 色 页 面 ”、“ 第 二 栏 显示 红色 页 面 ”、“ 第 三 栏 
显示 绿色 页 面 ”和 “第 四 栏 显示 橙色 页 面 ”。 那 么 ， 如 何 才 能 让 左 侧 导航 栏 实现 这 样 的 功能 呢 ? 现 在 
这 个 浏览 器 中 放 入 了 5 个 页 面 ， 当 使 用 者 单 击 页 面 左 侧 的 导航 栏 时 ， 其 中 的 条 目 会 链接 到 右 侧 不 同 的 
位 置 。 程 序 9.11 实现 了 这 个 框架 集 。 
【本 节 示 例 参考 : 资料 光盘 \ 第 9 章 \9-11 使 用 name 属性 给 框架 命名 .html】 
【实例 9-11】 使 用 name 属性 给 框架 命名 ， 其 源码 展示 如 下 : 


程序 9.11 使 用 name 属 性 给 框架 命名 .html 


01 <html> 
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02 
03 
04 
05 


<head> 

<title> 在 指定 的 框架 中 打开 页 面 </title> 
</head> 
<frameset cols="40%,*" > 


<frame src="white.html" marginwidth=50px marginheight=20px > 


<frameset rows="25%,25%,25%,*" > 


<frame src="silver.htmIl" marginheight=20px marginwidth=50px 


name="blue"> 


/给 不 同 的 框架 位 置 定义 相对 应 的 name 


<frame src="silverhtml” marginheight=20px marginwidth=50px 


name="red"> 


<frame src="silver.html" marginheight=20px marginwidth=50px 


name="green"> 


<frame src="silver.html" marginheight=20px marginwidth=50px 


name="orange"> 
</html> 


名 为 blue。 依 次 可 以 推论 出 ， 代 码 分 别 命名 了 红色 、 绿 色 和 橙色 的 框架 位 置 。 接 下 来 ， 只 要 设法 在 浏 

览 器 左 侧 令 导航 栏 中 的 目录 链接 到 所 对 应 名 字 的 框架 位 置 就 可 以 了 。 程 序 9.12 实现 了 页 面 对 应 不 同位 

置 的 框架 。 
【本 节 示 例 参考 ， 资 料 光盘 \ 第 9 章 \9-12 ”使 用 target 属性 定义 链接 的 框架 .html】 
【实例 9-12】 使 用 target 属性 定义 链接 的 框架 ， 其 源码 展示 如 下 : 


程序 9.12 ”使 用 target 属 性 定义 链接 的 框架 .html 


<html> 
<head> 
<title> 使 用 target 属性 定义 链接 的 框架 </title> 
<style> 
body {color:black; 
font:2em, arial; 
background-color:white; 


} 
table td {font:1.2em, 幼 圆 ; 
line-height:2.5em;} 
</style> 
</head> 
<body> 
white 
<p> 
<table border="0"> 
<tr> 


// 文 本 颜色 为 黑色 
// 文 本 的 字体 
// 页 面 的 背景 


// 表 格 中 的 文本 字体 
/设置 列表 之 间 的 距离 


<td><a href="blue.html" marginheight=20px marginwidth=50px 


target="blue"> 第 一 栏 显示 蓝 色 页 面 </a></td> 


</tr> 
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21 <tr> 

22 <td><a href="red.html" marginheight=20px marginwidth=50px 

23 target="red"> 第 二 栏 显示 红色 页 面 </a></td> 

24 </tr> 

25 <tr> 

26 <td><a href="green.html” marginheight=20px marginwidth=50px 
7 target="green"> 第 三 栏 显示 绿色 页 面 </a></td> 

28 </tr> 

29 <tr> 

30 <td><a href="orange.html” marginheight=20px marginwidth=50px 
31 target="orange"> 第 四 栏 显示 橙色 页 面 </a></td> 

32 </tr> 

33 </body> 

34 </html> 


【运行 程序 】 最 终 显 示 的 效果 如 图 9.12 所 示 。 
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图 9.12 最 终 页 面 效果 
【深入 学 习 】 代 码 第 18 行 中 ， 文 本 “第 一 栏 显示 蓝 色 页 面 
于 哪个 页 面 取决 于 第 19 行 中 的 “target="blue"” 
中 ,由 于 在 程序 9.10 中 已 经 命名 好 了 blue 框架 , 所以， 当 单 击 


” 超 链接 到 网 页 blue.html， 而 决定 放置 


。target 属性 使 超 链 接 的 页 面 放置 于 命名 为 blue 的 框架 


“第 一 栏 显 示 蓝 色 页 面 ” 超 链接 时 ，blue 


页 面 将 出 现在 浏览 器 右 侧 的 第 一 栏 。 同 样 原理 ， 其 他 3 色 的 页 面 也 能 出 现在 设 定好 的 框架 中 。 
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光盘 资料 \ 第 9 章 \9-11&9-12 指定 框架 内 实现 页 面 跳 转 .html。 


说 明 : 如 果 单 击 页 面 的 第 二 栏 ， 同 样 会 在 页 面 右 侧 第 二 


栏 链接 到 red.html。 最终 页 面 可 参考 


9.4.2 ”框架 内 的 错 点 链接 


使 用 name 属性 还 可 以 实现 在 框架 内 锚 点 链接 。 在 框架 集中 设置 页 面 路 径 的 同时 指定 锚 点 的 位 置 。 
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如 图 9.13 所 示 是 一 张 左右 分 割 布局 的 页 面 。 


而 框架 下 的 情 点 链接 “Windows Internet Explorer TD 四 
GO- Er | t+ xX je pl 
文 伯 (F)】 办 各 日 ”查看 () 收 大 天 (#) 工具 rT) 帮助 
窜 从 辕 ERhb 针 点 生 接 国 本 下 
锚 的 链 sn | 让 
出 
五 
七 


图 9.13 框架 内 的 锚 点 链接 初始 页 面 
在 这 个 页 面 中 ， 设 计 者 希望 当 单 击 左 侧 边框 中 文本 “ 带 有 锚 的 链接 ”时 ， 右 侧 边框 中 页 面 跳 转 到 
相应 的 文本 位 置 。 那 么 ， 在 左 侧 边框 中 的 页 面 写 入 页 面 代码 : 
<a href ="12.html#aaa" target ="showframe"> 带 有 锚 的 链接 </a> 


说 明 : 因为 只 是 一 个 基本 的 简单 链接 页 面 ， 这 里 并 没有 给 出 左 侧 边框 中 的 页 面 源 码 ， 可 参 


右 侧 框架 中 的 页 面 保存 为 页 面 文件 12.html， 右 侧 框架 命名 为 showframe， 所 以 这 句 代 码 的 意思 表 
明 ， 链 接 到 showframe 框架 内 12.html 页 面 的 aaa 位 置 。 因 此 ， 右 侧 框架 中 的 页 面 代码 中 需要 有 这 样 注 
明 的 一 句 代码 : 

<a name="aaa"> 十 四 </a> 
在 文本 “十 四 ”的 位 置 定义 为 “aaa” 的 锚 点 。 那 么 ， 最 终 框 架 集 的 代码 如 程序 9.13 实现 的 锚 点 

【本 节 示 例 参考 : 资料 光盘 \ 第 9 章 \9-13 ”框架 内 的 锚 点 链接 .html】 

【实例 9-13】 框 架 内 的 锚 点 链接 ， 其 源码 展示 如 下 : 


程序 9.13 ”框架 内 的 锚 点 链接 .html 


01 <html> 

02 <head> 

03 <title> 框 架 内 的 锚 点 链接 </title> 

04 </head> 

05 <html> 

06 <frameset cols="180,”> 

07 <frame src="content.html"> 

08 <frame src="12.html#aaa" name="showframe"> 
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09 </frameset> 

10 </html> 

【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 9.14 所 示 。 
和合 鳃 -| 大 Fe 机 可 时 加 由] | 二 二 pl 
文件 (F) ”篇 辑 (E) ”查看 (v) 收 套 天 (A) 工具 (7) 帮助 (H) 
| 
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图 9.14 框架 内 的 锚 点 链接 最 终 页 面 


【深入 学 习 】 重 点 是 代码 中 的 第 8 行 ， 使 用 # 放 在 链接 页 面 名 的 后 面 。 这 样 ， 当 浏览 器 打开 页 面 时 
会 定位 到 这 一 位 置 ， 同 时 ， 当 单 击 左 侧 文本 “ 带 有 锚 的 链接 ”时 ， 也 会 定位 到 这 一 位 置 。 


9.5 灵活 的 <iframe> 框 架 


<iframe> 标 签 的 用 法 不 同 于 <frame> 标 签 ， 在 表现 上 也 有 不 少 差别 ，<iframe> 标 签 创建 的 框架 具有 
更 好 的 灵活 性 。 它 可 以 更 容易 地 将 框架 放 在 浏览 器 中 的 任何 位 置 ， 可 以 自由 控制 窗口 的 大 小 ， 所 以 ， 
这 种 框架 又 被 称 之 为 嵌入 式 框架 ， 或 者 浮动 框架 。 这 种 框架 也 是 页 面 中 常见 的 一 种 。 
<iframe> 标 签 是 可 以 放 在 <body> 标 签 中 使 用 的 ， 同 样 ， 它 可 以 使 用 修饰 框架 的 属性 ， 常 见 的 样式 
属性 如 下 : 
<iframe src="URL" width="..." height="..." 
align=... marginwidth="..." marginheight="..." 
scrolling="auto" frameborder="..."> 
</iframe> 


width 和 height 表明 插入 框架 的 宽 和 高 ，align 标签 表明 框架 中 的 内 容 对 齐 方式 ， 其 他 的 标签 意义 
和 <frame> 标 签 关联 的 属性 是 一 样 的 。 具 体 如 何 使 用 <iframe> 标 签 ， 如 程序 9.14 创建 浮动 框架 。 
【本 节 示 例 参考 : 资料 光盘 \ 第 9 章 \9-14 ”创建 浮动 框架 .html】 
【实例 9-14】 创 建 浮动 框架 的 方法 ， 其 源码 展示 如 下 : 
程序 9.14 ”创建 浮动 框架 .html 


01 <html> 
02 <head> 
03 <title> 创 建 浮动 框架 </title> 
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04 </head> 

05 <body> 

06 <a href="http://www.baidu.com.cn" target="three"> 百 度 </a> 
07 <ahref="http://www.google.cn" target="three"> 谷 歌 </a> 

08 <a href="http://www.soso.com" target="three"> 搜 搜 </a> 

09 <p> 

10 <iframe width="800" height="400" 

11 frameborder=0 scrolling="auto" 

12 align="center" name="three"> /设置 浮动 框架 的 样式 属性 
13 </body> 

14 </html> 


【运行 程序 】 浏 览 该 页 面 ， 本 例 中 使 用 target 和 name 属性 配合 ， 展 示 在 浮动 框架 中 实现 的 链接 ， 
结果 如 图 9.15 所 示 。 
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图 9.15 创建 浮动 框架 


当 单 击 页 面 左上 角 的 导航 小 标题 时 ,浮动 框架 便 链 接 到 所 对 应 的 不 同 页 面 。 第 10 行 代码 定义 了 浮 
动 框架 的 大 小 ， 第 11 行 表 示 滚 动 条 自动 匹配 ， 框 架 的 边框 不 显示 。 第 12 行 表明 这 个 框架 居于 页 面 中 
间 ， 并 命名 为 three。 


9.6 案例 : 制定 自己 的 链接 主页 


本 节 将 展示 如 何 结合 <table> 标 签 来 布局 页 面 ， 思 路 是 通过 表格 来 布局 ， 在 表格 的 单元 格 中 放 入 浮 
动 框架 。 同 只 使 用 框架 集 的 布局 来 说 ， 这 样 还 是 比较 好 的 ， 虽 然 表 格 布局 已 经 有 些 落 伍 了 ， 但 是 类 似 
这 样 布 局 的 运用 ， 依 然 是 个 不 错 的 方法 。 如 程序 9.15 的 表格 配合 框架 的 使 用 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 9 章 \9-15 ”制定 自己 的 链接 主页 .html】 


【实例 9-15】 制 定 自己 的 链接 主页 ， 其 源码 展示 如 下 : 
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21 
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第 9 章 创建 框架 结构 的 页 面 


程序 9.15 制定 自己 的 链接 主页 .html 


<html> 
<head> 
<title> 制 定 自己 的 链接 主页 </title> 
<style> 
body {color:black; 
font:2em, arial; 
background-color:silver; 


} 


.biaoti {font:1.5em, 华 文政 珀 ; 


color:blue; 
b 
table td {font:1.2em,; 
line-height:2.5em; 
text-align:center; 
align:center;} 
tfoot td{ 
border-width:0px; 
text-align:right; 
font-size:12px; 
color:green;} 
alink {color : blue; 


text-decoration : none; 


) 


a:visited {color : green:; 


text-decoration : none; 


} 


a:hover {color : red; 


// 文 本 颜色 
/文本 的 字体 
/页 面 的 背景 颜色 


/biaoti 对 象 的 字体 
/biaoti 对 象 的 文本 颜色 


/表格 的 字体 

// 表 格 文本 的 行距 

// 表 格 中 文本 的 对 齐 方 式 
// 表 格 的 对 齐 方 式 


// 页 脚 的 样式 


/| 链接 状态 的 修改 


text-decoration : underline; 


} 
aactive {color : #999999; 


text-decoration : none; 


</style> 
</head> 
<body> 
<table border="0"> 
<tfoot> 
<tr> 


/| 制定 表格 


<td colspan="2">zhaohui </td> 


</tr> 
</tfoot> 
<tr id="biaoti"> 


/这 两 个 单元 格 中 放 入 logo 图 像 


<td width="100" height="70"><img src=" 图 片 /Glass.png" border=0/></td> 
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44 <td class="biaoti"> 浏 览 属于 自己 的 主页 </td> 
45 </tr> 
46 <tr> ”<!-- 这 两 个 单元 格 中 放 入 列表 和 框架 集 
47 <td> 
48 <p><a href=http://www.baidu.com target=three>baidu</a> 
49 <p><a href="http://www.google.cn" target="three">google</a> 
50 <p><a href="http://www.soso.com" target="three">sousou</a> 
51 <p> 
52 </td> 
<td> 
54 <iframe width="800" height="430" marginwidth="0" 
frameborder=0 scrolling="auto" 
56 align="center name="three" 
57 Src="http://www.baidu.com"” 
58 = /| 制定 浮动 框架 
59 </iframe> 
60 </td> 
61 </tr> 
62 </table> 
63 </body> 
64 </html> 


【运行 程序 】 浏 览 该 页 面 ， 最 终 在 浏览 器 中 的 显示 效果 如 图 9.16 所 示 。 
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图 9.16 制定 自己 的 链接 主页 
【深入 学 习 】 本 例 使 用 “ 田 ” 字 型 表格 布局 整个 页 面 。 在 右 下 角 的 单元 格 中 嵌入 一 个 浮动 框架 ， 
用 来 显示 页 面 。 这 是 使 用 表格 和 框架 的 组 合 来 布局 页 面 ， 左 侧 是 导航 栏 ， 右 侧 是 页 面 的 主要 内 容 。 此 
外 ， 还 可 以 在 左上 角 放 入 自己 的 logo， 右 上 角 放 入 自己 喜欢 的 页 面 标题 。 
通过 这 个 例子 ， 可 以 设 定 属 于 自己 的 主页 。 这 个 方法 不 难 ， 使 用 这 样 的 方法 ， 读 者 可 以 自行 加 入 
更 多 的 页 面 链接 。 
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9.7 人 小 结 


本 章 介绍 了 通过 框架 集 来 布局 页 面 的 知识 ， 通 过 对 本 章 的 学 习 ， 读 者 可 以 将 多 个 页 面 放 入 在 同一 
个 浏览 器 窗口 中 ， 使 页 面 内 容 更 加 丰富 ， 对 于 浏览 者 来 说 ， 增 加 了 页 面 的 便捷 性 ， 无 疑 也 提高 了 页 面 
的 友好 度 。 本 章 主 要 的 知识 点 有 : 

口 ” 使 用 <frameset> 和 <frame> 标 签 创建 框架 。 

口 ”常见 的 几 种 布局 页 面 的 基本 形式 。 

口 ”修饰 框架 的 边框 和 边 距 。 

口 在 框架 中 实现 页 面 链接 以 及 锚 点 链接 。 

口 ”<iframe> 标 签 创建 浮动 框架 。 

最 后 通过 一 个 综合 案例 结合 了 较 多 知识 点 ， 包 括 使 用 样式 表 来 修饰 页 面 内 容 ， 结 合 表格 和 浮动 杠 
架 来 布局 页 面 。 在 第 10 章 中 ， 将 介绍 Web 设计 中 又 一 个 布局 页 面 的 重要 元 素 层 。 


"159。 


第 10 章 当 CsSs 样式 表 过 到 层 


从 本 章 开始 ， 我 们 有 必要 给 HTML 的 概念 升级 。W3C 曾 规 定 : “动态 HTML 是 一 个 被 某 些 厂商 
用 来 描述 可 使 文档 动态 性 更 强 的 HTML、 样 式 表 以 及 脚本 的 结合 物 的 术语 。” 动 态 HTML 指 的 便 是 
DHTML (Dynamic HTML) 。 对 大 多 数 人 来 说 ，DHTML 便 是 HTML 4.0、CSS 样式 表 以 及 JavaScript 
的 结合 物 。 本 章 重 点 介绍 的 是 掌握 使 用 CSS 样式 表 的 精髓 ， 主 要 的 知识 点 如 下 。 


口 “了解 页 面 是 如 何 布局 的 。 
口 ”理解 层 的 意义 ， 以 及 层 的 特性 和 它 的 使 用 方式 。 
口 ”学 习 创 建 框 模型 及 它 的 使 用 规律 和 特点 。 
口 了 解 CSS Hack。 
口 简单 的 布局 页 面 的 创建 。 
P= 


说 明 : HTML 4.0 和 CSS 样式 表 已 经 在 前 面 章节 中 详细 学 习 了 ，JavaScript 的 内 容 将 在 第 


14 章 中 详细 介绍 。 


10.1 理解 块 级 的 意 》 


在 Web 设计 中 ， 设 计 者 使 用 CSS 来 修饰 页 面 的 内 容 ， 而 与 CSS 这 个 名 字 相关 的 还 有 一 个 名 字 是 
CSS-P〈Cascading Style Sheets Positioning) 。 它 是 CSS 的 一 个 扩展 ， 表 示 如 何 布局 页 面 内 容 在 浏览 窗 
口中 的 位 置 。 那 么 使 用 样式 表 是 如 何 工作 的 呢 ? 如 程序 10.1 所 示 为 通过 层 来 布局 页 面 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 10 章 \10-1 了 解 通过 层 来 布局 页 面 内 容 的 位 置 .html】 
【实例 10-1】 了 解 通过 层 来 布局 页 面 内 容 的 位 置 ， 其 源码 展示 如 下 : 


程序 10.1 了 解 通过 层 来 布局 页 面 内 容 的 位 置 .html 


01 <html> 

02 <head> 

03 <title> 了 解 通过 层 来 定位 页 面 内 容 的 位 置 </title> 

04 <style> 

05 #navigation { 

06 position:absolute; // 定 位 层 在 页 面 中 的 位 置 
07 font:1em 幼 圆 bold; 

08 left:10; // 层 距离 窗口 10px 的 位 置 


09 line-height:2em; /设置 行 高 
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10 width:8em: 

11 background:orange; 

12 i 

13 #content { margin-left:8em; 。”// 设 置 左边 距 

14 font:1.2em arial; 

15 border-left:0.1em orange dotted; 

16 

17 

18 

19 导航 栏 内 容 是 放 在 
20 <div id=navigation> 层 navigation 中 的 
21 Ul> 

22 < 这 目录 一 

23 <li> 目 录 二 

24 <li> 目 录 三 

25 <li> 目 录 四 

26 <li> 目 录 五 

2 <li> 目 录 六 

28 </div > 

29 <div id=content>&nbsp;&nbsp;&nbsp;&nbsp; 绰号 其 实 也 讲 历史 含 荀 ， 短 小 精 悍 ， 很 
30 难 翻译 给 其 他 国家 的 人 听 。.… … 

31 </div> 

32 </body> 

33</html> 


【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 10.1 所 示 。 
ET 
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绰号 其 实 也 潮 历史 合 苑 ， 短 小 精 介 ， 很 难 册 译 给 
其 他 国家 的 人 听 。 乱 想 ， 要 给 人 家 说 卢 俊 义 ， 先 得 
给 他 齐 个 上 下 五 千年 ， 山名 是 怎么 回 事 ， 瑞 务 
话说 鲁 国 刚 出 向 部 就 校 人 家 打 死 ， 攻 得 孔 圣 人 嘲 吻 
大 回 ， 未必 真 的 议 了 一 一 稍 汶 贿 涂 点 ，qilin 倒 也 打 
发 了 ， 轮 到 玉 了 ， 还 得 琢 府 一 下 ， 到底 性 说 肤色 
甩 , 洁 晶 如 玉 ,还 是 气度 高 蕉 哪怕 巧 舌 知 赞 ,到 
了 这 也 旦 个 礁 处 , 


但 也 有 些 缠 号 ， 更 多 县 因为 词汇 有 多 种 章 思 , 比 
如 老 前 芋 情 士 ， 高 中 时 打球 就 虎 埠 一 震 ( 特此 鸣 者 
装 易 ) ， 王 气 十 足 , 投 乱 精 准 ， 传 球 利索 ， 有 如 医 
生 手 术 刀 般 稳定 ， 于 是 外 号 Doctor , 医生 是 
Doctor ,卫士 也 是 Doctor , 此 乃 己 长 张 、 立 早 章 

百年 前 是 一 家 。 


10.1 了 解 通过 层 来 定位 页 面 内 容 的 位 置 


【深入 学 习 】 在 本 例 中 ， 注 意 第 20 行 、28 行 、29 行 和 第 31 行 中 的 <div> 标 签 ， 可 以 看 成 整个 窗 
口 是 由 这 两 个 层 布局 组 成 的 。 两 组 <div> 标 签 封装 了 各 自 对 象 的 样式 表 ， 再 通过 样式 表 将 各 自 的 对 象 定 
位 在 网 站 中 不 同 的 位 置 。 这 种 布局 的 思路 就 是 所 说 的 “ 块 级 ”布局 ， 也 是 常 说 的 CSS+DIV。 
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说 明 : 实例 10-1 中 一 些 对 层 所 设置 的 样式 表 , 其 中 的 属性 作用 会 在 后 面 的 章节 中 陆续 介绍 ， 


这 里 全 者 只 需 明白 层 是 如 何 表 现 页 面 的 就 可 以 了 。 


10.2 ”页面 中 的 层 


CSS 样式 表 可 以 通过 被 封 在 层 上 这 种 方式 来 限制 页 面 所 修饰 的 内 容 。 这 就 是 说 ， 为 了 使 用 样式 
表 只 是 对 页 面 局 部 起 修饰 作用 ， 于 是 设计 者 将 页 面 的 局 部 内 容 定义 在 某 个 范围 中 ， 这 个 范围 便 称 之 
为 CSS-layer (CSS 层 ) 。CSS 层 可 以 通过 HTML 标签 来 定义 ， 这 种 使 用 方法 是 Web 设计 中 的 一 枚 
利器 。 


10.2.1 行 <span> 和 层 <div> 


设计 者 常 把 CSS 样式 表 放 在 <span> 和 <div> 这 两 个 布局 页 面 的 标签 中 , 其 作用 是 令 样 式 表 可 以 只 对 
标签 中 的 内 容 元 素 起 作用 。 这 两 者 的 区 别 是 <span> 标 签 针 对 的 是 行内 的 对 象 ， 而 <div> 标 签 针 对 的 是 层 
内 的 对 象 。 为 了 形象 说 明 什么 是 行 标签 ， 这 里 通过 以 下 代码 展示 一 个 简单 的 案例 : 

<style> 

#color {color:red; 

} 
</style> 
《 爆 余 录 》 像 是 一 个 历尽 沧桑 的 百 岁 老人 所 写 ，<span id="color" > 但 是 当时 的 张爱玲 只 有 24 岁 。</span > 她 对 自 
己 的 自私 和 冷酷 ， 有 一 种 抽 离 。 


\ -说 明 : 为 了 节约 书面 空间 ， 这 部 分 代码 只 是 给 出 了 关键 部 分 。 这 里 定义 了 一 个 color 的 样式 
表 ， 通 过 id 选择 器 作用 于 <span> 标 签 内 的 文本 。 


结果 如 图 10.2 所 示 。 
《< 烛 余 录 》 像 是 一 个 历尽 沧桑 的 百 岁 老人 所 写 ， 但 是 当时 的 张爱玲 只 有 24 岁 。 她 对 自己 的 自私 和 冷酷 ， 有 一 种 抽 离 。 
图 10.2” <span> 标签 的 作用 


通过 <span> 标 签 的 作用 ， 这 行文 本 只 有 <span> 标 签 中 间 的 内 容 被 修饰 了 。<div> 标 签 如 程序 10.1 
中 所 示 。 如 代码 第 20 一 28 行 中 的 内 容 ， 仅 修饰 了 页 面 中 的 左 侧 导航 栏 ， 这 就 是 <div> 标 签 的 ”作用 。 


人 注意 : 如 果 <div> 标 签 中 没有 引用 样式 表 ， 那 么 ， 其 作用 就 相当 于 <p> 标 签 。 
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10.2.2 层 的 基本 定位 


通过 一 些 基本 的 属性 可 以 给 层 定位 在 页 面 中 的 任何 位 置 ， 这 些 主要 的 属性 有 方位 属性 ， 如 层 的 左 、 
、 下 。 描 述 大 小 的 属性 ， 如 层 的 宽 、 高 、 参 照 位 置 。 
left: 相当 于 窗口 左边 的 位 置 。 
right: 相当 于 窗口 右边 的 位 置 。 
top: 相当 于 窗口 上 边 的 位 置 。 
bottom: 相当 于 窗口 下 边 的 位 置 。 
width: 表示 层 的 宽度 。 
height: 表示 层 的 高 度 。 
position: 用 来 控制 采用 什么 样 的 方式 定位 图 层 。 
position 属性 下 可 以 定义 为 absolute、relative 和 static 属性 。absolute 属性 表示 为 “ 层 的 位 置 以 网 页 
的 左上 角 为 基准 来 设置 ”; relative 表示 为 “ 层 的 位 置 以 其 原始 值 的 位 置 来 设置 ”; static 表示 为 “ 层 的 
位 置 以 HTML 默认 的 位 置 来 设置 ”。 
事实 上 ， 只 要 通过 left 和 top 属性 就 可 以 控制 层 在 页 面 中 的 位 置 了 ， 而 width 和 height 属性 设置 层 
的 大 小 ， 如 程序 10.2 所 示 。 
【本 节 示 例 参考 : 资料 光盘 \ 第 10 章 \10-2 层 的 基本 定位 .html】 
【实例 10-2】 层 的 基本 定位 ， 其 源码 展示 如 下 : 


程序 10.2 层 的 基本 定位 .html 


DOOOOOOF 


01 <html> 

02 <head> 

03 <title> 层 的 定位 </title> 

04 </head> 

05 <style> 

06 div {position:absolute; /以 浏览 器 窗口 为 基准 设置 
07 ‘Width:300px; 

08 height:300px:; 

09 left:5em; /距离 窗口 5em (em 参考 7.3.2 小 节 ) 来 定位 页 面 内 容 的 位 置 
10 top:5em; 

11 } 

12 </style> 

13 <body> 

14 <div> 


15 ”夕阳 武士 为 了 筹措 盘 缠 回 故乡 而 出 战马 贼 ， 但 小 时 医生 的 告诫 他 会 在 这 一 年 失明 ， 虽 然 光线 在 
16 ”他 的 眼中 已 经 日 渐 展 暗 ， 但 他 还 是 坚持 出 战 最 终 战 死 。 欧 阳 锋 很 奇怪 他 为 何 要 急 着 赶 回去 ? 武 
17 士 回 答 说 家 乡 的 桃花 很 美 ， 他 要 回去 看 桃花 ! 欧阳 锋 好 奇 去 了 武士 的 家 乡 ， 发 现 那里 根本 没有 
18 ”桃花 ， 只 有 一 个 女人 ， 她 的 名 字 岂 做 桃花 ……… 


19 </div> 
20 </body> 
21 </html> 
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【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 10.3 所 示 。 


NU mY MD CEA TARY WH 
”rs tem dB 


1 top=5em 


| 

| 

| 
height=300px 

| 

| 

] 


width=300px 
Js FT 
图 10.3 层 的 定位 


【深入 学 习 】 如 图 10.3 中 所 示 ， 上 面 距离 窗口 顶部 是 5em， 框 架 距离 窗口 左 侧 是 5em， 边 框 的 长 
度 和 宽度 都 是 300px。 如 果 需 要 把 很 多 个 层 放 在 页 面 中 ， 这 就 是 一 个 最 简单 的 布局 页 面 的 方法 。 


注意 : 在 层 中 文本 内 容 不 足 height 属性 下 的 高 度 时 ， 层 的 大 小 会 默认 为 300px。 如 果 层 中 
的 内 容 超出 height 属性 下 的 高 度 时， 浏览 器 会 自动 修改 原始 层 的 高 度 来 适应 文本 的 内 容 。 


10.2.3 ” 层 的 又 加 


层 不 同 于 表格 和 框架 ， 其 最 大 优势 在 于 可 以 登 如 。 这 是 因为 层 具有 一 个 “Z 轴 ” 的 特性 ，Z 轴 好 比 
3D 坐标 中 的 乙 轴 ， 是 一 个 上 下 层级 的 关系 ， 就 是 说 一 个 层 是 可 以 履 盖 在 另 一 个 层 上 面 ， 如 图 10.4 所 示 。 


10.4 层 又 示意 图 


如 果 有 3 个 层 如 图 10-4 中 一 次 堆 释 , 浏览 器 中 最 终 显示 的 是 divl 层 中 定义 的 内 容 。 它 的 全 加 规律 
是 这 样 ， 在 <body> 标 签 中 ， 根 据 层 依 次 出 现 的 顺序 ， 以 此 来 判定 层 的 上 下 级 关系 。 定 义 具体 的 使 用 如 


程序 10.3 所 示 。 
【本 节 示 例 参考 : 资料 光盘 \ 第 10 章 \10-3” 层 的 到 加 .html】 


【实例 10-3】 层 的 登 加 ， 其 源码 展示 如 下 : 
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01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 


<html> 
<head> 
<title> 层 的 登 加 </title> 
</head> 
<style> 
div {height:300; 
width:300; 
} 
#d1 {position:absolute; 


background-color:green; 


left:2em; 

top:2em; 

by 

#d2 {position:absolute; 

background-color:blue; 
left:4em; 
top:4em; 
} 

#d3 {position:absolute; 
background-color:red; 
left:-6em; 
top:6em; 

} 
</style> 
<body> 

<div id="d1"> 
<div 2"> 
<div id="d3"> 
</body> 
</html> 
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程序 10.3 ” 层 的 全 加 .html 


// 定 位 页 面 层 位 置 属性 


// 距 离 窗 口 2em 来 定位 页 面 内 容 的 位 置 


// 距 离 窗 口 4em 来 定位 页 面 内 容 的 位 置 


// 距 离 窗 口 6em 来 定位 页 面 内 容 的 位 置 


/定义 这 个 为 最 下 面 的 层 
/定义 这 个 为 中 间 的 层 
/定义 这 个 为 最 上 面 的 层 


【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 10.5 所 示 。 


图 10.5 层 到 的 关系 
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【深入 学 习 】 在 本 例 中 ， 首 先 写 入 的 是 代码 第 26 行 ， 表 明 最 先 放 入 页 面 的 是 dl 层 ， 代 码 第 28 行 
最 后 写 入 ,， 即 表明 最 后 放 入 页 面 的 是 d3 层 ， 所 以 ， 层 的 又 加 顺序 是 ，d1 层 在 最 下 面 , 而 d3 层 在 最 上 面 。 

如 果 设 计 者 希望 在 页 面 中 改变 叠加 的 顺序 而 不 受 先后 定义 的 约束 ， 可 以 使 用 z-index 属性 ， 这 个 属 
性 表明 层 在 Z 轴 上 的 辣 放 位 置 。 上 述 代 码 中 ,如 果 在 任何 一 块 样式 表 中 添加 zindex:1， 如 代码 19 行 中 
d3 样式 表 中 添加 的 ， 那 么 d3 块 的 层 将 会 被 排放 在 最 下 面 一 层 。 


10.3 框 模 型 


层 的 内 部 便 是 一 个 框 模型 (box model) ， 这 个 概念 很 重要 。 在 CSS 广泛 应 用 之 前 ， 建 立 一 个 出 色 
的 页 面 布局 只 能 通过 框架 集 、 表 格 ， 大 量 内 嵌 表 格 框架 ， 或 者 一 堆 堆 的 <p> 标 签 和 空格 符号 。 而 当 使 用 
层 的 框 模型 思路 布局 时 ， 设 计 者 们 就 找到 了 最 好 的 选择 。 有 时 它 完 全 可 以 替代 框架 、 表 格 等 。 这 种 方 
法 不 仅 可 以 为 页 面 代码 精简 ， 而 且 大 大 缩短 了 页 面 的 刷新 时 间 ， 这 样 更 易于 管理 代码 。 


10.3.1 理解 框 模型 


层 中 内 容 的 外 面 被 很 多 空间 级 概念 的 物质 包围 , 如 空 距 (padding)、 边 框 (border) 和 边 距 (margin) 。 
页 面 中 任意 一 个 层 中 内 容 的 周围 理论 上 是 这 样 被 包围 的 ， 如 图 10.6 所 示 的 框 模型 。 


图 10.6 框 模型 


页 面 内 容 可 以 是 任何 内 容 。 如 果 设 计 者 愿意 ， 可 以 用 任何 东西 替代 页 面 内 容 ， 一 段 文 本 ， 或 者 一 
幅 图 像 、 一 个 表格 ， 甚 至 是 框架 集 。 当 然 也 可 以 是 一 个 层 。 而 为 了 精确 布局 页 面 ， 了 解 框 模型 的 大 小 
在 页 面 中 的 表现 ， 可 以 参考 程序 10.4 给 出 的 一 个 框 模型 的 简单 实例 。 

【本 节 示 例 参 考 : 资料 光盘 \ 第 10 章 \10-4” 框 模型 的 大 小 .html】 

【实例 10-4】 框 模型 的 大 小 ， 其 源码 展示 如 下 : 


程序 10.4” 框 模型 的 大 小 .html 


01 <html> 

02 <head> 

03 <title> 框 模型 的 大 小 </title> 
04 <style> 
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05 #a {background-color:teal; 


06 


31 
32 


width:20em: 
height:10em; 
padding:1em ; 


border:1em solid navy; 


margin:1em; 


} 


#b {background-color:teal; 


width:20em; 
height:13em; 
padding:3em; 
border:1em solid navy; 
margin:3em; 
} 

</style> 

</head> 

<body> 

<div id="a"> 


// 空 距 的 距离 是 1em 
// 边 框 的 宽度 是 1em 
// 边 距 的 宽度 是 lem 


// 空 距 的 距离 是 3em 
// 边 框 的 宽度 是 lem 
// 边 距 的 宽度 是 3em 
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《 爆 余 录 》 像 是 一 个 历尽 沧桑 的 百 岁 老人 所 写 ， 但 是 当时 的 张爱玲 只 有 24 岁 。 她 对 自己 的 自私 


和 冷酷 ， 有 一 种 抽 离 。 


</div> 
<p> 
<div id="b"> 


《 烛 余 录 》 像 是 一 个 历尽 沧桑 的 百 岁 老人 所 写 ， 但 是 当时 的 张爱玲 只 有 24 岁 。 她 对 自己 的 自私 


和 冷酷 ， 有 一 种 抽 离 。 


</div> 
</body> 


</html> 


【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 10.7 所 示 。 
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图 10.7 框 模型 的 大 小 


各 注意 : 在 这 里 height 属性 值 是 指 从 边框 上 沿 〈border) 到 边框 下 沿 的 距离 。 
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【深入 学 习 】 如 图 10.7 中 所 示 ， 层 实际 的 高 度 是 “ 层 中 页 面 内 容 的 高 度 + 上 空 距 + 上 边框 + 上 边 距 + 
下 空 距 + 下 边框 + 下 边 距 ”的 值 。 

第 一 个 层 中 ， 如 果 事 先 设 定 的 height 属性 值 超出 层 中 上 下 边框 之 间 的 距离 ， 那 么 页 面 内 容 会 以 空 
白 部 分 填补 缺少 的 高 度 ， 最 终 令 层 的 上 下 边框 之 间 的 距离 等 于 height 属性 值 。 如 图 10.7 中 上 面 第 一 个 
层 ， 页面 内 容 即 文本 的 高 度 为 4am， 上 边框 + 上 空 距 + 下 边框 + 下 空 距 为 4em。 这 样 实际 层 的 上 下 边框 之 
间 的 距离 是 8em， 而 height 属性 设置 为 10em， 所 以 层 中 文本 内 容 会 补 齐 2em 高 度 。 

而 第 二 个 层 设置 的 高 度 正好 符合 上 下 边框 的 距离 。 所 以 层 中 文本 没有 出 现 多 余 的 空 行 。 如 果 height 
的 属性 值 小 于 层 的 上 下 边框 之 间 的 距离 , 这 时 height 属性 值 便 失去 作用 。 例如, 样式 表 “#b” 中 ,height 
设置 为 10em， 这 样 的 话 ，height 值 将 不 起 作用 。 第 二 层 的 样式 不 会 发 生 改 变 。 

此 外 ， 如 果 上 下 两 个 层 之 间 放 在 一 起 ， 那 么 ， 两 个 层 的 边 距 (margin) 将 会 出 现 合并 ， 最 终 以 较 
大 的 边 距 为 标准 。 如 图 10.7 所 示 ， 上 下 层 之 间 的 距离 是 3em， 而 并 非 是 3em+lem 得 到 4em。 


注意 : 页 面 内 容 占据 的 空间 是 由 width 和 height 属性 设置 的 , 而 内 容 周围 的 边 距 padding 和 
边框 border 值 是 另外 计算 的 。 但 是 在 IE 浏览 器 中 ，width 和 height 属性 是 包括 边 距 和 边框 的 长 度 的 。 


10.3.2 空 距 padding 属性 
padding 属性 又 常 被 称 为 内 边 距 。padding 属性 可 以 细 分 为 padding-top、padding-right、padding-bottom 
和 padding-left 4 个 属性 , 通过 它们 可 以 控制 一 个 框 模型 中 的 每 一 边 空 距 , 如 “padding-bottom:1.5em;”。 
此 外 为 了 方便 ,设计 者 可 以 使 用 快捷 的 写法 来 分 别 设置 4 条 边 ， 如 下 所 示 。 
口 ” 当 padding 只 定义 一 个 数值 时 ， 例 如 : 
padding:1em; 
表示 所 有 框 模型 空 距 为 lem。 
口 当 padding 定义 两 个 数值 时 ， 例 如 : 
padding:1em 2em; 
表示 所 有 框 模 型 空 距 顶 边 和 底 边 为 em， 左边 和 右边 为 2em。 
口 当 padding 定义 3 个 数值 时 ， 例 如 : 
padding:1em 2em 3em; 
表示 所 有 框 模型 空 距 右 边 为 lem， 左边 和 右边 为 2em， 底 边 为 3em。 
口 当 padding 定义 4 个 数值 时 ， 例 如 : 
padding:1em 2em 3em 4em; 
表示 所 有 框 模 型 空 距 将 按照 顺 时 针 方 向 ， 由 顶 边 为 lem 开始 ， 依 次 是 右边 为 2em、 底 边 为 3em 和 
左边 为 4em。 
此 外 还 有 一 个 有 趣 的 用 法 , 就 是 借助 padding 属性 可 以 使 用 自 定义 图 像 来 作为 空 距 。 但 是 在 浏览 器 
中 这 种 方法 只 能 定义 其 中 的 一 条 边 ， 如 程序 10.5 中 使 用 自 定义 图 像 来 修改 边 距 的 样式 。 
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【本 节 示 例 参考 : 资料 光盘 \ 第 10 章 \10-5 ”使 用 自 定义 图 像 来 作为 空 距 .html】 
【实例 10-5】 使 用 自 定义 图 像 作 为 空 距 ， 其 源码 展示 如 下 : 
程序 10.5 使 用 自 定义 图 像 来 作为 空 距 .html 


30 


<html> 
<head> 
<title> 使 用 自 定义 图 像 来 作为 空 距 </title> 
<style> 
body {text-align:center; 
line-height:20px; // 设 置 文本 的 行 高 
white-space: pre; // 相 当 于 pre 标签 的 作用 


} 
h1 {font:1.5em 宋体 ; 


} 
h2ffont1em 幼 圆 ; 


} 

#c {margin-left:40px; // 定 义 层 中 文本 的 位 置 
padding-left:20px; // 定 义 左 边 空 距 的 位 置 
background:url( 图 片 /回形针 .png) left repeat-y; // 使 用 自 定义 图 像 设 置 左边 空 距 


} 
</style> 
</head> 
<body> 
<div id="c"> 
<h1> 将 进 酒 </h1> 
<h2> 李 白 </h2> 
<br> 君 不 见 黄河 之 水 天 上 来 ， 奔 流 到 海 不 复 回 。 
<br> 君 不 见 高 堂 明镜 悲 白 发 ， 朝 如 青丝 暮 成 雪 。 
<br> 人 生得 意 须 尽 欢 ， 莫 使 金榜 空 对 月 。 
<br> 天 生 我 材 必 有 有 用， 千金 散 尽 还 复 来 。 


</body> 
</html> 


【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 10.8 所 示 。 


: 说 明 : 代码 第 7 行 中 “white-space: pre;” 的 作用 是 保持 HTML 源 代码 的 空格 与 换行 等同 
于 pre 标签 。 在 IE 浏览 器 中 不 能 得 到 支持 ， 所 以 使 用 了 Firefox 浏览 器 ， 这 里 为 了 精简 代码 使 用 了 这 一 
标签 ， 在 大 量 代码 的 页 面 中 不 推荐 使 用 。 


【深入 学 习 】 图 10.8 中 左 侧 一 栏 便 是 使 用 自 定义 图 像 设置 的 。 
中 的 一 条 ， 所 以 在 框 模型 中 就 显得 不 那么 实用 。 如 果 希 望 制 作 4 条 边 自 定义 图 像 的 边框 ， 更 好 的 办 法 
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由 于 这 种 使 用 方法 只 能 定义 4 条 边 
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是 使 用 已 经 做 好 的 PNG 图 像 或 GIF 图 像 。 
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图 10.8 ”使 用 自 定义 图 像 来 作为 空 距 


说 明 : padding-bottom 可 以 用 来 修饰 超 链接 下 划 线 ， 具 体 可 参考 第 6 章 的 内 容 。 


10.3.3 边框 border 的 扩展 属性 


border 是 一 种 使 用 频率 非常 高 的 属性 ， 表 格 、 边 框 中 都 有 它 的 身影 。 对 于 边框 ， 不 仅 可 以 改变 它 
的 宽度 ， 而 且 可 以 指定 其 格式 和 颜色 (参考 第 8 章 的 内 容 ) 。 所 以 ， 边 框 的 属性 具有 多 样式 的 扩展 ， 
其 属性 可 以 细 分 为 border-width 属性 、border-style 属性 和 border-color 属性 。 

口 ”border-width: 表示 边框 的 宽度 。 

口 ”border-style: 表示 边框 的 样式 ， 常 用 的 有 solid、dotted、dashed 等 。 

口 ”border-color: 表示 边框 的 颜色 。 


注意 : 默认 情况 下 ， 边 框 的 属性 是 none。 就 是 说 ， 如 果 像 border:2px 代码 这 样 ， 那 么 是 不 
会 有 边框 的 ， 如 果 前 面 已 经 有 设 定 过 的 边框 样式 ， 这 句 将 默认 继承 上 级 的 边框 样式 。 


同样 ， 也 可 以 像 padding 属性 那样 ， 采 用 快捷 的 方式 来 定义 边框 ， 例 如 : 
border:3px dotted red; 

或 者 使 用 快捷 方式 定义 每 一 条 边框 ， 例 如 : 

border:1em 2em 3em 4em; 


说 明 : CSS 2.1 指出 ,页 面 内 容 的 背景 是 由 内 容 、 内 边 距 和 边框 区 的 背景 组 成 的 。 大 多 数 浏 
览 器 都 遵循 CSS 2.1 定义 ， 不 过 一 些 较 老 的 浏览 器 可 能 会 有 不 同 的 表现 。 


ins 


0 


10.3.4 边 距 


margin 属性 又 称 之 为 外 边 距 ， 就 好 像 是 围绕 在 边框 范围 外 的 一 层 “ 气 场 ”。padding 属性 值 不 能 为 
负 值 ， 而 margin 属性 值 可 以 为 负数 ， 以 此 对 内 容 进 行 县 加 。 前 面 已 经 有 所 提 及 ， 如 果 两 个 或 两 个 以 上 
的 纵 边 边 距 紧 挨 在 一 起 ， 那 么 彼此 相 邻 的 边 距 会 发 生 合 并 现象 ， 最 终 彼 此 边框 之 间 的 距离 为 两 个 边 距 
较 大 的 边 距 宽度 ， 而 非 两 个 边 距 之 和 。 

类 似 于 空 距 和 边框 ， 边 距 属性 也 可 以 细 分 为 上 、 下 、 左 、 右 4 条 边 分 别 控制 。 它 们 是 上 边框 属性 
margin-top、 下 边框 属性 margin-bottom、 左 边框 属性 margin-left 和 右边 框 属性 margin-right。 

此 外 ， 如 果 两 个 不 同 页 面 内 容 的 边 距 彼 此 上 下 相 邻 ， 也 会 发 生 合并 的 现象 。 为 了 解决 这 个 问题 ， 
可 以 在 其 中 的 一 个 页 面 内 容 中 添加 边框 或 者 空 距 ， 来 隔 开 两 个 边 距 接触 ， 如 程序 10.6 所 示 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 10 章 \10-6 “不同 页 面 内 容 的 边 距 相 邻 .html】 

【实例 10-6】 不 同 页 面 内 容 的 边 距 相 邻 ， 其 源码 展示 如 下 : 


程序 10.6 不 同 页 面 内 容 的 边 距 相 邻 .html 


01 <html> 

02 <head> 

03 <title> 不 同 页 面 内 容 的 边 距 相 邻 </title> 

04 <style> 

05 #d {margin:2em; // 边 距 设 置 为 2em 
06 background:cyan; 

07 border1px solid; 

08 } // 设 置 边框 的 样式 
09 p{margin:1em ; // 边 距 设置 为 lem 
10 background:yellow; 

11 } 

性 </style> 

13 </head> 

14 <body> 

15 <divid="d"> 

16 <p> 

17 曾 昕 过 一 个 故事 .… 

18 </div> 

19 </body> 

20 </html> 


【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 10.9 所 示 。 
【深入 学 习 】 如 果 这 段 代 码 中 缺少 了 第 7 行 的 代码 对 边框 的 设 定 ， 层 〈div) 的 边 距 和 文本 的 边 距 
彼此 相 接 ， 则 层 的 边 距 会 被 合并 ， 如 图 10.10 所 示 。 
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曾 听 过 一 个 故事 ， 有 人 去 找 禅师 求 得 解脱 痛苦 的 方 
法 ， 禅 师 让 他 自己 悟 出 。 第 一 天 ， 禅 师 问 他 悟 到 什 
举 起 戒 尺 ; 。 第 二 天 ， 禅 师 


曾 听 过 一 个 故事 ， 有 人 去 找 禅 师 求 得 解脱 痛苦 的 
方法 ， 禅 师 让 他 自己 悟 出 。 第 一 天 ， Ce 
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图 10.10 错误 的 合并 方式 
10.3.5” 框 模型 的 溢出 


如 果 层 中 的 内 容 太 多 ， 以 至 于 超出 了 层 的 初始 设 定 范围 ，IE 浏览 器 此 时 会 “自作 主张 ”地 帮忙 拉 
伸 层 的 范围 。 为 了 改变 这 种 情况 ， 令 层 的 大 小 不 会 发 生 改 变 ， 可 以 使 用 overflow 属性 。 在 默认 情况 下 ， 
overflow 属性 为 visible， 意 思 是 页 面 内 容 都 是 可 见 的 。 所 以 ， 这 是 层 的 大 小 失去 控制 的 原因 ， 如 程 
序 10.7 的 overflow 属性 所 示 。 


【本 节 示 例 参考 : 资料 光盘 \ 第 10 章 \10-7 使 用 overflow 属性 .html】 
【实例 10-7】 使 用 overflow 属性 ， 其 源码 展示 如 下 : 


程序 10.7 使 用 overflow 属 性 .html 


01 <head> 

02 ”<title> 使 用 overflow 属 性 </title> 

03 <style> 

04 #d {margin:2em; // 设 置 边 距 大 小 

05 height:20em; // 设 置 页 面 高 度 

06 width:30em; /设置 页 面 宽度 

07 background:cyan; // 设 置 页 面 背景 颜色 
08 overflow:auto; // 自 动 控制 页 面 的 滑动 条 
09 } 

10 </style> 

11 </head> 

多 <body> 


13 <div id="d"> 


“ls 


<p> 
15 对 冲 基 金 (Hedge Fund) 


16 本 
17 </div> 
18 </body> 
19 </html> 


【运行 程序 】 结 果 如 图 10.11 所 示 。 它 像 浮 动 框架 一 样 内 医 在 页 面 中 。 从 这 点 来 说 ，CSS 2.0 之 后 
所 进行 的 页 面 设计 ， 使 用 对 层 的 框 模型 创建 使 框架 集 的 使 用 大 大 降低 。 
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巴 了 E77 ERT 
图 10.11 使 用 overflow 属性 
【深入 学 习 】 第 8 行 代码 将 overflow 属性 设置 为 aato， 则 窗口 会 根据 页 面 内 容 的 多 少 来 决定 是 否 
出 现 滚 动 条 。 此 外 ， 还 可 以 设置 为 hidden 和 scroll 属性 ， 前 者 会 严格 按照 属性 性 质 来 设 定 框 的 大 小 ， 
超出 的 内 容 将 会 被 隐藏 。 而 后 者 页 面 内 容 无 论 是 否 溢出 框架 ， 都 将 显示 滚动 条 。 


10.4 定制 层 的 display 属性 


前 面 已 经 了 解 到 ， 层 的 表现 是 通过 “ 框 ” 这 种 结构 ， 框 可 以 是 块 级 对 象 (block element) ， 也 可 以 
是 行内 对 象 (inline element) 。 那 么 所 谓 display 属性 就 是 用 来 控制 其 中 的 内 容 是 块 级 还 是 行 级 。 所 以 ， 
基本 的 定义 为 block， 表 现 为 块 级 ; 或 者 定义 为 inline， 表 现 为 行 级 。 默 认 情况 下 是 none， 表 现 为 不 显 
示 框 ， 代 码 如 下 : 

display:block; 


在 第 7 章 的 内 容 中 己 经 讲解 了 使 用 display 属性 来 设计 导航 栏 的 方法 .其 中 的 原理 正 是 因为 display 
属性 的 行内 inline 的 作用 ， 设 计 者 可 以 将 框 中 任何 一 个 对 象 设置 成 所 选择 的 类 型 ， 如 程序 10.8 展示 的 
display 属性 所 示 。 
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【本 节 示 例 参 考 : 资料 光盘 \ 第 10 章 \10-8 display 属性 .html】 
【实例 10-8】display 属性 ， 其 源码 展示 如 下 : 


程序 10.8 display 属性 .html 


01 <html> 

02 <head> 

03 <title>display 属性 </title> 

04 <style type="text/css"> 

05 body { 

06 text-align:"center"; 

07 font 80% 黑体 ; 

08 } 

09 h1 {font-size: 2em; // 设 置 字体 大 小 

10 } 

11 h2 {font-size: 1.5em; 

12 } 

13 #kuai, #hang {background: silver; 

14 border 2px solid black; 。//#kuai 和 #hang 对 象 的 边框 样式 
15 } 

16 span { background: white; 

17 display: block; // 设 置 为 块 级 对 象 

18 border 0.5em dashed green;  // 设 置 span 对 象 边 框 的 样式 
19 padding: 1em; 

20 margin: 0.5em; 

21 } 

22 span.yanse { 

23 background: yellow; /行内 对 象 的 背景 颜色 

24 } 

25 #hang span { 

26 display: inline; /设置 为 行内 对 象 

27 } 

28 </style> 

29 </head> 

30 <body> 

31 <h1>“ 块 ”和 “ 行 ” </h1> 

32 <h2> 块 </h2> 

33 <p id="kuai"><span> 北 京 </span><span class="yanse"> 上 海 </span><span> 香 港 
34 </span><span class="yanse"> 海 南 </span></p> 

35 <h2> 行 </h2> 

36 <p id="hang"><span> 北 京 </span><span class="yanse"> 上 海 </span><span> 香 港 
37 </span><span class="yanse"> 海 南 </span></p> 

38 </body> 

39 </html> 


【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 10.12 所 示 。 
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图 10.12 display 属性 


注意 : 定义 为 行内 对 象 的 框 模型 ， 在 默认 情况 下 将 忽视 纵 方向 上 的 边 距 。 如 图 10.12 所 示 ， 


空 距 和 边框 将 会 超出 所 在 的 行 。 


【深入 学 习 】 代 码 第 33 行 和 34 行 定义 了 其 中 的 文本 为 块 级 对 象 ， 引 用 了 kuai 这 个 样式 表 。 在 页 
面 中 可 以 看 到 ，<span> 标 签 内 的 文本 是 以 纵 排 依次 排列 ， 就 是 块 级 样式 。 而 代码 第 36 行 和 37 行 中 的 
内 容 为 hang 样式 表 的 对 象 。 在 页 面 中 的 结果 如 图 10.12 所 示 ， 陈 列 出 “ 行 ”的 样式 依次 横向 排列 。 

为 了 防止 这 种 溢出 的 情况 ，inline 属性 扩展 出 inline-block。 顾 名 思 义 ， 这 个 属性 是 为 了 将 行内 对 象 
中 的 内 容 定义 为 “行内 框 ”。 所 以 ， 如 果 将 代码 第 26 行 改 为 “display:inline-block;”， 那 么 将 表现 为 
如 图 10.13 所 示 的 效果 。 


10.13 inline-block 属性 


10.5 CSS Hack 


目前 世界 上 流行 着 多 种 浏览 器 ,主要 有 正 浏览 器 、Firefox 浏览 器 、Opera 浏览 器 以 及 Google 浏览 
器 ， 它 们 基于 不 同 的 内 核 ， 对 CSS 的 解析 也 就 不 一 样 ， 这 直接 导致 生成 的 页 面 效果 不 同 。 例 如 ， 最 直 
接 的 影响 就 体现 在 框 模型 中 对 距离 的 理解 ， 这 对 设计 者 来 说 ， 是 很 伤 脑筋 的 一 件 事 。 怎 样 才能 够 解决 
浏览 器 兼容 的 问题 呢 ? 只 能 针对 不 同 的 浏览 器 写 不 同 的 样式 表 ， 这 种 写法 被 称 之 为 CSS Hack。 

尽管 有 许多 Hack 针对 不 同 的 浏览 器 提供 了 解决 方案 , 如 在 解决 下 浏览 器 和 Firefox 浏览 器 中 布局 
不 同 的 问题 时 ， 常 用 的 一 个 是 !important。 由 于 !important 不 被 正 支持 ， 而 其 他 浏览 器 可 以 支持 ， 使 用 
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这 个 特性 可 以 用 来 解决 很 多 问题 。 如 有 时 在 定义 padding 对 和 象 时 , 在 正 浏 览 器 和 Firefox 中 有 误差 ， 则 


设计 者 先 制定 被 非 下 浏览 器 能 识别 的 声明 ， 再 添加 一 个 下 也 色 
后 声明 顺序 ， 下 面 通过 程序 10.9 来 说 明 如 何 使 用 Hack。 
【本 节 示 例 参 考 : 
【实例 10-9】 使 用 Hack 的 方法 ， 其 源码 展示 如 下 : 


程序 10.9 使 用 Hack.html 


小 识 别 的 声明 。 其 中 需要 注意 CSS 的 先 


资料 光盘 \ 第 10 章 \10-9 ”使 用 Hack.html】 


01 <html> 

02 <head> 

03 <title>CSS Hack</title> 

04 <style> 

05 .Select {border:20px solid navy !important' /设置 Hack 中 的 边框 样式 
06 width:230px limportant: /设置 Hack 中 的 宽度 
07 padding:20px !limportant:; /人 设置 Hack 中 的 空 距 
08 border20px solid orange; /设置 边框 样式 

09 width:300px; /| 设置 宽度 

10 padding:20px; // 设 置 空 距 

11 font;1.5em 新 宋体 ; 

12 text-align:center; 

13 } 

14 </style> 

15 </head> 

16 <body> 

17 <div class="select"> 在 Firefox 中 的 效果 是 蓝 色 边框 ， 它 的 width 设置 为 230px。 
18 而 在 IE 7 浏览 器 中 的 效果 是 橙色 边框 ， 它 的 width 设置 为 310px。</div> 

19 ”</body> 

20 </html> 


【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 10.14 所 示 。 
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10.14 使 用 CSS Hack 的 页 面 效 果 
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【深入 学 习 】 图 10.14 中 左 侧 是 Firefox 浏览 器 中 的 页 面 效果 , 右 侧 是 在 了 正 7 浏 览 器 中 的 页 面 效 果 。 
如 代码 第 5 一 7 行 中 ， 由 于 声明 中 附加 了 limportant， 所 以 下 浏览 器 无 法 分 析 声 明 。 而 Firefox 接受 了 信 
息 ， 所 以 在 浏览 器 中 显示 出 蓝 色 的 边框 。IE 浏览 器 接受 了 第 8 一 10 行 中 的 代码 声明 ， 所 以 在 浏览 器 中 
显示 出 橙色 边框 。 

此 外 ， 从 效果 上 看 ， 两 个 边框 的 大 小 都 是 一 样 的 。 但 是 在 代码 中 可 以 看 到 ， 它 们 被 设置 了 不 同 的 
宽度 ， 造 成 这 种 不 同 的 原因 就 是 因为 浏览 器 之 间 存 在 差异 。 但 对 设计 者 来 说 ， 很 糟糕 的 是 ， 他 们 可 选 
择 的 方法 不 多 ， 只 能 花 些 时 间 和 耐心 ， 去 测试 不 同 的 页 面 效 果 进行 调整 。 所 以 设计 者 在 制作 页 面 时 ， 
要 尽量 避免 使 用 Hack。 

对 于 浏览 器 的 不 断 升级 和 创新 ，CSS Hack 也 在 不 断 地 变化 之 中 ， 也 许 哪 天 某 一 标签 的 作用 将 被 所 
有 浏览 器 统一 ， 又 或 许 出 现 新 的 技术 而 某 些 浏览 器 无 法 使 用 。 作 为 设计 者 ， 也 只 能 希望 W3C 组 织 来 统 
一 Web 的 标准 。 
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10.6 案例 : 简单 的 CSS+DIV 


从 本 章 开始 ， 读 者 应 该 习惯 当 谈 到 页 面 布局 这 样 的 问题 时 ， 首 先 想到 的 是 使 用 CSS 和 层 的 配合 使 
用 ， 这 里 使 用 前 面 所 学 的 知识 制作 一 个 简单 的 三 栏 式 布局 的 页 面 ， 如 程序 10.10 所 示 。 相 当 于 本 章 开 始 
的 两 栏 布 局 ， 三 栏 布局 并 不 只 是 多 加 了 一 个 层 。 在 本 案例 中 ， 要 留心 三 栏 的 布局 在 数字 上 的 巧妙 安排 ， 
如 果 数 字 排 得 不 够 精确 ， 页 面 也 许 会 变 得 面目 全 非 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 10 章 \10-10 ”三 栏 布局 下 的 页 面 .html】 

【实例 10-10】 三 栏 布局 下 的 页 面 ， 其 源码 展示 如 下 : 


程序 10.10 三 栏 布局 下 的 页 面 .html 
01 <!IDOCTYPE html PUBLIC "-WW3CWDTD XHTML 1.0 Strict/EN" 


02 "http:/www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

03 ”<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

04 <head> 

05 <title> 使 用 CSS+DIV 布局 页 面 </title> 

06 <style type="text/css" > 

07 #header {background: silver; // 页 面 头 部 的 样式 表 
08 } 

09 #footer {background: gray; // 页 面 底部 的 样式 表 
10 } 

11 body {font: 80% ”微软 雅 黑 ; 

2 margin: 0; 

13 } 

14 h1,h2 {margin-top: 0; 

15 } 

16 #oneBlock {font-size:1.5em ; // 页 面 主题 左 侧 的 导航 栏 
17 position: absolute; 
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18 left: 0; // 距 离 页 面 左 侧 的 距离 为 0 
19 padding:20px:; 

20 width: 130px; height:300px; 

21 background-color:orange; 

22 } 

23 #twoBlock {font-size:1.5em; // 页 面 主题 左 侧 的 导航 栏 
24 position: absolute; 

25 right: 0; /距离 页 面 右 侧 的 距离 为 0 
26 padding-right:10px; padding-top:20px; 

27 width: 135px;height:500px; 

28 background-color:orange; 

29 } 

30 #content {text-indent:25px; // 首 字母 缩 进 
31 margin: 0 180px 0 200px:; 

32 } 

33 </style> 

34 </head> 

35 <body> 

36 <div id="header"> 使 用 CSS+DIV 布局 页 面 </div> 

37 <div id="oneBlock"> 

38 <ul> 

39 <li><a href="> 北 京 </a></li> 

40 <li><a href="> 上 海 </a></li> 

41 <li><a href="> 香 港 </a></li> 

42 </ul> 

43 </div> 

44 <div id="twoBlock"> 

45 <ul> 

46 <li><a href="">Beijing</a></li> 

47 <li><a href=">Shanghai</a></li> 

48 <li><a href=">Hongkong</a></li> 

49 </ul> 

50 </div> 

51 <div id="content"> 

52 <h1> 中 国 </h1> 

53 <h2> 北 京 </h2> 

54 北京 位 于 华北 平原 与 东北 平原 、 蒙 古 高 原 的 交接 处 ， 

5 

56 <h2> 上 海 </h2> 

57 原来 的 上 海 只 是 一 个 以 渔业 和 棉纺 织 手工 业 为 营 的 小 镇 ，19 世纪 
SR 

59 <h2> 香 港 </h2> 

60 香港 是 国际 的 金融 中 心 之 一 ， 金 融 机 构 和 市 场 紧密 联系 。 
71 

62 </div> 

63 <p> 


sis 


64 <div id= footer>&nbsp: 
65 </div> 
66 </body> 
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10.15 三 栏 式 布局 


【深入 学 习 】 在 本 例 中 ， 代 码 第 7 一 9 行 中 的 两 个 样式 表 #header 和 #footer 首先 定义 了 页 面 中 头 尾 
的 Banner。 该 例 的 难点 在 于 代码 第 16 一 22 行 的 样式 表 #oneBlock 和 第 23 一 29 行 的 #twoBlock 样式 表 ， 
其 重点 在 于 width 的 长 度 设置 。oneBlock 是 一 个 宽 130px、 高 300px 且 居 左 为 0 的 框 模型 。twoBlock 
是 一 个 宽 135px、 高 500px 且 居 右 为 0 的 框 模型 。 所 以 之 后 #content 定义 的 margin 距离 页 面 左右 的 距离 
分 别 为 200px 和 180px。 这 个 数值 没有 绝对 的 精确 度 ， 只 要 保证 不 和 左右 两 个 块 级 区 域 重 合 就 可 以 了 。 
其 中 padding 属性 用 来 控制 文本 在 框 模型 中 的 位 置 , 默认 情况 下 是 以 左边 为 标准 。 所 以 在 #twoBlock 
对 象 中 ， 不 得 不 使 用 细 化 的 padding 属性 以 使 于 控制 文本 的 位 置 。 


~ 说 明 : 在 样式 表 中 ，position 属性 用 来 定位 框 模型 的 位 置 ， 这 是 一 种 绝对 定位 的 用 法 ， 具 体 
的 使 用 将 在 第 11 章 中 详细 介绍 。 


10.7 小 结 


本 章 介绍 了 CSS+DIV 布局 的 入 门 知识 及 一 些 基础 的 概念 型 知识 。 这 些 基 础 知识 很 重要 ， 了 解 了 这 
些 知 识 点 后 ， 在 今后 Web 设计 的 学 习 中 ， 即 使 是 自学 ， 也 可 以 很 好 地 融会 贯通 新 的 知识 。 本 章 主 要 的 
知识 点 有 : 
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使 用 CSS 样式 表 来 布局 页 面 ， 使 页 面 分 割 成 块 级 结构 。 

理解 层 的 意义 ， 它 可 以 用 来 封装 CSS 样式 表 ， 以 及 层 的 特性 和 使 用 方式 。 

层 的 布局 格式 典型 如 框 模型 ， 了 解 空 距 、 边 框 、 边 距 的 含义 和 特性 。 

了 解 CSS Hack， 使 用 它 来 解决 浏览 器 的 兼容 性 。 

使 用 <display> 属 性 来 设置 块 级 对 象 和 行内 对 象 。 

在 第 11 章 中 ， 将 进一步 讨论 页 面 布局 ， 以 及 如 何 令 模块 实现 在 页 面 中 的 定位 等 问题 。 


DOODODO DO 


第 11 章 进一步 讨论 页 面 布 局 的 方法 


在 了 解 了 基本 的 层 和 框 模型 后 ， 接 下 来 便 可 以 进一步 去 讨论 可 以 做 出 怎样 效果 的 页 面 。 设 计 者 需 
要 将 页 面 划分 为 不 同 的 区 域 ， 就 好 像 是 在 城市 规划 ， 将 不 同 的 页 面 内 容 布局 在 不 同 的 位 置 ， 哪 里 放置 
公园 ， 哪 里 放置 社区 ， 哪 里 是 商业 区 等 ， 页 面 的 分 布 和 内 容 所 处 的 位 置 ， 将 会 给 浏览 者 传递 重要 的 网 
站 讯息 。 本 章 主要 的 知识 点 如 下 。 

口 了 解 框 模型 的 定位 以 及 使 用 它们 来 布局 页 面 。 

口 浮动 层 的 使 用 。 

口 CSS 3.0 的 一 些 奇特 技术 以 及 未 来 发 展 趋势 。 

口 YAHOO 的 YUI Grid CSS。 


11.1 页 面 中 的 定位 


当 能 够 娴熟 地 将 层 布 局 在 页 面 中 时 , Web 设计 一 定 会 带 给 用 户 无 限 的 乐趣 和 享受 过 程 带 来 的 惊喜 。 
在 第 10 章 中 ， 定 义 框 模型 时 ， 已 经 了 解 了 有 一 个 position 属性 。 基 于 这 个 属性 的 运用 ， 可 以 将 页 面 内 
容 定位 分 成 静态 定位 、 相 对 定位 、 绝 对 定位 、 固 定 定位 和 浮动 5 种 方式 。 

11.1.1 静态 定位 

position 默认 情况 下 定义 的 便 是 static 属性 ， 此 时 的 框 模型 是 静态 定位 ， 和 其 他 文本 内 容 配 合 。 代 
码 的 写法 是 : 

position:static; 

由 于 属于 默认 属性 ， 所 以 通常 都 省 略 在 代码 中 写 出 来 。 如 程序 11.1 静态 定位 的 页 面 形式 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 11 章 \11-1 默认 情况 下 的 静态 定位 .html】 

【实例 11-1】 默认 情况 下 的 静态 定位 ， 其 源码 展示 如 下 : 

程序 11.1 默认 情况 下 的 静态 定位 .html 


01 <html> 

02 <head> 

03 <title> 页 面 内 容 的 定位 </title> 

04 <style> 

05 body {font-size:1.5em; // 字 体 大 小 
06 color:white; 


07 text-align:center; // 定 义 文本 居中 对 齐 


HTML+CSS 网 页 设计 指南 
08 } 
09 #block1 {background:navy; 
10 padding:1em; /设置 空 距 为 lem 
11 } 
12 #block2 {position:static; / 研 认 的 情况 下 可 以 省 略 
13 left:20px; /定义 层 距离 窗口 左边 20px 
14 top:20px; // 定 义 层 距离 窗口 项 部 20px 
15 background-color:orange; 
16 padding:1em; 
17 } 
18 #block3 {background-color:green; 
19 padding:1em; 
20 } 
21 </style> 
22 </head> 
23 <body> 
24 <div id="block1"> 区 域 1</div> 
25 <div id="block2"> 区 域 2</div> 
26 <div id="block3"> 区 域 3</div> 
27 </body> 
28 </html> 
【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 11.1 所 示 。 
局 页 面 册 容 的 定位 - Windows Internet Expbrer [ex 
~ [Br + Xx 
文件 F) ” 编 各 [EE 查 得 V) 羽生 天 (A) 工具 0T] 本 有 (4) 
帘 安 大 BA 位 偷 " 目 - 出 "四 -“ 
区 域 2 
图 11.1 静态 定位 


-会 
明 后 面 不 同属 性 下 位 置 的 样式 。 


注意 : 在 本 例 中 static 属性 的 定位 下 ， 代 码 第 13 和 14 行 不 起 作用 ， 放 在 本 例 中 是 为 了 说 


【深入 学 习 】 代 码 第 12 行 交 代 了 本 例 中 的 层 定 位 ， 是 和 系统 默认 情况 下 一 样 的 。 所 以 ， 每 一 块 


区 域 都 自然 无 颖 地 结合 在 一 起 ， 从 上 至 下 ， 如 果 设 置 的 是 行内 对 象 ， 那 么 


并 接 。 
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区 域 按照 从 左 至 右 无 颖 


11.1.2 ”相对 定位 


如 果 将 实例 11-1 中 的 position 属性 改 成 relative， 其 作用 表示 相对 定位 ， 那 么 它 所 相对 的 参照 物 ， 
就 是 static 属性 下 的 位 置 , 也 就 是 默认 情况 下 的 位 置 。 当 设 定 不 同 的 数值 时 , 相对 于 初始 位 置 发 生 改 变 ， 
而 初始 位 置 会 留 下 空白 占 位 。 这 里 可 以 通过 top、right、bottom 和 left 属性 来 控制 位 移 。 如 若 代 码 12 
和 13 行 属性 改写 成 : 

position:relative; // 采 用 相对 位 置 定位 

left:20px; 

那么 ， 这 两 名 代码 表明 所 约束 的 对 象 相 对 于 初始 位 置 向 右 偏离 20px 的 位 置 。 所 以 当 把 程序 11.1 
中 的 position 属性 改 成 relative 后 ， 其 结果 如 图 11.2 所 示 。 


图 11.2 ”相对 定位 


由 图 11.2 中 可 以 发 现 ， 区 域 2 偏离 了 原先 的 初始 位 置 〈《 居 左 20px， 居 上 20px) 。 而 偏 移 之 后 的 初 
始 位 置 ， 依 然 是 一 片 空白 。 


11.1.3 绝对 定位 


绝对 定位 absolute 是 使 用 最 多 的 属性 之 一 。 较 之 于 相对 定位 relative， 它 的 特点 在 于 当 对 象 发 生 位 
移 时 ， 原 先 初始 位 置 的 内 容 如 同 被 去 除了 一 样 ， 这 个 对 象 独立 于 其 他 的 页 面 内 容 ， 而 初始 位 置 的 空白 
会 被 其 他 内 容 自 然 填补 。 

此 外 ， 绝 对 定位 的 框 并 非 是 相对 于 初始 位 置 发 生 位 移 。 事实 上 ， 它 是 相对 于 上 一 级 的 框 的 初始 位 
置 发 生 位 移 。 如 果 上 一 级 的 框 是 浏览 器 窗口 ， 那 么 它 就 是 相对 于 整个 页 面 来 发 生 位 移 。 同 样 ， 绝 对 定 
位 也 可 以 使 用 top、right、bottom 和 left 属性 来 控制 位 移 。 

如 果 将 程序 11.1 中 的 第 12 行 和 第 13 行 中 position 属性 和 居 左 距离 修改 为 : 

position:absolute; 

left:20px; 

那么 结果 将 如 图 11.3 所 示 。 结 果 区 域 2 独立 于 其 他 页 面 内 容 被 分 离 了 出 来 。 由 于 上 一 级 的 框 即 是 
页 面 本 身 ， 所 以 ， 它 所 发 生 的 位 移 是 相对 于 浏览 器 窗口 向 右 偏 移 20px， 向 下 偏 移 20px。 而 区 域 1 和 区 
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域 3 结合 在 了 一 起 ， 就 好 像 从 来 都 没有 过 区 域 2 一 样 。 那 么 ， 什 么 是 相对 于 上 一 级 的 框 发 生 位 移 呢 ? 
如 程序 11.1 的 例子 ， 在 样式 表 的 定义 中 添加 一 个 新 的 定义 ， 插 入 的 代码 是 : 
span {position:relative; 
background-color:black; 
} 
那么 ， 这 个 行内 标签 就 是 上 一 级 的 框 模型 ， 而 接着 将 代码 第 24 行 写 为 : 
<span> 这 里 上 一 级 的 “ 框 ” 
<div id="block2"> 区 域 2 
</div> 
</span> 
所 以 ， 这 里 的 区 域 2 被 放置 在 了 <span> 标 签 内 ， 即 放 在 一 个 <span> 定 义 的 框 中 ， 它 是 block2 框 模 
型 的 上 一 级 。 结 果 如 图 11.4 所 示 。 


OS EE TT | 
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准 帘 ”由 克 mth 位 合 " 目 - 委 ， 加 - @ "| | w Bmnoman Ee DO | 
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图 11.3 绝对 定位 图 11.4 相对 于 上 一 级 “ 框 ” 的 绝对 定位 


如 图 11.4 所 示 ， 区 域 2 是 相对 于 它 的 上 一 级 框 ， 即 黑色 的 这 个 框 所 发 生 的 位 移 ， 以 黑色 框 的 上 边 
向 下 偏 移 20px， 向 右 偏 移 10px。 


11.1.4 国定 定位 
固定 定位 比较 类 似 于 绝对 定位 ， 当 页 面 长 度 超出 浏览 器 窗口 时 ， 会 出 现 滚动 条 。 区 别 就 在 于 绝对 


定位 下 的 页 面 对 象 的 框 ， 会 随 着 滚动 条 和 页 面 一 起 移动 ， 而 固定 定位 下 的 页 面 对 象 的 框 则 不 会 随 之 滚 
动 。 同 样 ， 固 定 定位 也 可 以 使 用 top、right、bottom 和 left 属性 来 控制 位 移 。 


他 


固定 定位 和 绝对 定位 的 性 质 是 一 样 的 ， 它 们 所 定义 的 框 的 位 置 是 独立 于 其 他 页 面 内 容 之 外 的 。 这 
样 , 难免 有 时 它们 会 全 加 在 一 起 , 这 种 情况 可 以 使 用 Z 轴 属 性 , 即 层 的 又 加 特性 来 改变 它们 的 顺序 ( 参 
考 第 10 章 ) 。 


注意 : IE 7 之 前 版 本 的 IE 浏览 器 不 支持 固定 定位 的 框 。 
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11.2 浮 动 层 


浮动 层 可 以 将 所 定义 的 页 面 内 容 方便 地 放置 在 页 面 的 左边 或 右边 ， 通 常 放 入 图 像 时 使 用 这 种 方法 
会 很 方便 。 事实 上 ， 浮 动 层 可 应 用 于 任何 对 象 ， 浮 动 框 的 代码 写法 为 : 

float:left; 

也 可 以 定义 成 right 和 none， 具 体 的 使 用 如 程序 11.2 创建 浮动 层 的 方法 。 

【本 节 示 例 参考 ， 资 料 光 盘 \ 第 11 章 \11-2 ”创建 浮动 层 .html】 

【实例 11-2】 创 建 浮动 层 的 方法 ， 其 源码 展示 如 下 : 


程序 11.2 创建 浮动 层 .html 


01 <html> 

02 <head> 

03 <title> 创 建 浮动 层 </title> 

04 <style type="text/css" > 

05 body {font: 80%/1.5 黑体 ; // 定 义 页 面 文本 字体 

06 } 

07 h3 {font:1.2em 幼 圆 ; 

08 } 

09 #box {width: 12em; // 定 义 这 个 框 模型 的 宽度 

10 float: left; // 定 义 在 左 侧 的 浮动 层 

11 color: white; // 设 置 文 本 的 颜色 

12 background: #060; /设置 背景 颜色 

13 padding: 1em; // 设 置 空 大 小 

14 margin: 0; // 设 置 边 距 大 小 

15 h 

16 </style> 

17 </head> 

18 <body> 

19 <h3> 一 月 一 日 领导 者 必须 正直 </h3> 

20 <p> 组 织 的 精神 是 自 上 而 下 树立 起 来 的 

21 </p> 

22 <p id="box"> 摘 自 : 彼得 . 德 鲁 克 《管理 :任务 、 责 任 与 务实 》 

23 </p> 

24 <p> 当 考察 管理 者 是 否 诚信 时 ， 人 们 必定 会 非常 重视 他 的 人 品 是 否 正直 ， 这 一 点 必 
25 定 首先 会 在 管理 者 的 人 事 任用 上 体现 出 来 ， 因 为 领导 者 正 是 通过 其 正直 的 人 品 ， 才 能 够 实 
26 现 其 领导 ， 领 导 者 也 正 是 通过 其 正直 的 人 品 ， 才 树立 了 别人 效仿 的 榜样 … 
20 <p> 这 一 点 对 企业 最 高 领导 层 的 重要 性 是 毋庸 置疑 的 ， 因 为 一 个 组 织 的 精神 是 自 上 而 
f 

29 </p> 

30 </body> 

31 </html> 
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【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 11.5 所 示 。 浮动 层 定义 在 文本 的 左边 ,而 文本 被 挤 压 在 右边 。 
所 以 ， 浮 动 层 并 不 是 说 会 浮动 在 页 面 的 上 方 而 盖 住 下 面 的 文本 。 相 反 ， 浮 动 层 更 像 是 可 以 随意 嵌入 页 
面 的 一 个 技术 。 此 外 ， 如 果 并 不 需要 浮动 层 的 左右 并 排 存 在 页 面 内 容 ， 可 以 使 用 “clear” 属 性 来 清除 
页 面 其 他 内 容 。 在 代码 的 样式 表 定义 中 ， 加 入 “clear” 属 性 的 声明 ， 如 下 代码 所 示 : 


span {clear-left; 
} 


那么 ， 假 如 在 程序 11.2 第 26 句 的 位 置 引用 这 个 声明 : 


现 其 领导 ，<span> 领 导 者 也 正 是 通过 其 正直 的 人 品 ， 才 树立 了 别人 效仿 的 榜样 ， 在 人 品 这 一 点 上 ， 人 们 无 法 弄 虚 
作假 ， 一 个 领导 者 的 同事 ， 尤 其 是 他 的 下 属 们 ， 只 要 和 领导 者 共事 几 周 ， 就 会 知道 他 是 否 正 直 ， 他 们 可 以 原谅 别 
人 的 无 能 ， 疏 忽 ， 缺 乏 安全 感 甚至 是 粗鲁 无 礼 ， 但 是 他 们 却 无 法 宽 杷 别人 的 不 正直 ， 他 们 也 无 法 宽 总 领导 者 选用 
不 够 正直 的 人 。</span> 


当 设 计 者 将 这 段 文本 放 入 <span> 标 签 内 时 ， 页 面 的 结果 如 图 11.6 所 示 。 


图 11.5 ”创建 浮动 层 图 11.6 clear 属性 的 应 用 
【深入 学 习 】 当 使 用 clear 属性 之 后 ， 页 面 内 容 将 不 会 和 浮动 层 处 于 同一 行 的 设 定 。clear 属性 还 可 
以 定义 为 right 和 both。right 属性 定义 为 在 右边 不 允许 浮动 元 素 。both 属性 定义 为 左右 两 侧 均 不 许 浮动 
元 素 。 


注意 : 留心 对 比 图 11.5 和 图 11.6， 可 以 了 解 两 种 不 同样 式 的 对 比 。 


11.3 CSS 的 新 奇 技 术 以 及 未 来 发 展 


在 流行 的 CSS 样式 设计 中 ， 包 括 本 书 中 所 讨论 的 大 部 分 内 容 都 是 基于 CSS 2.1。 而 现在 ，CSS 3.0 
也 慢 慢 地 向 我 们 走 近 ， 其 中 多 数 功 能 目前 还 未 能 被 广泛 地 支持 ， 但 是 其 中 不 乏 一 些 已 经 尝试 使 用 的 
功能 。 
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11.3.1 图 像 替 换 技术 

图 像 替 换 技术 是 指使 用 图 像 替 换 页 面 中 文本 的 功能 ， 类 似 于 在 页 面 中 插入 图 像 ， 只 是 这 种 方法 更 
为 方便 ， 易 于 代码 管理 。 通 常 来 说 ， 设 计 者 习惯 使 用 有 意义 的 图 像 去 替换 一 些 标题 、logo 和 某 些 特定 
的 页 面 背 景 。 

这 里 通过 一 个 综合 的 图 像 例子 ， 介 绍 如 何在 页 面 中 放 入 图 像 ， 设 置 背景 图 像 ， 以 及 使 用 图 像 替 换 
技术 ， 如 程序 11.3 展示 的 页 面 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 11 章 \11-3 ”使 用 CSS 控制 图 像 的 技巧 .html】 

【实例 11-3】 使 用 CSS 控制 图 像 的 技巧 ， 其 源码 展示 如 下 : 


程序 11.3 ”使 用 CSS 控 制图 像 的 技巧 .html 


01 <html > 

02 <head> 

03 <title>Sweet</title> 

04 <style type="text/css" > 

05 body {font: 90%/1.5 幼 圆 ; 

06 color: white; 

07 background: black url( 图 片 /dog.jpg) bottom right 

08 fixed repeat-x; // 设 置 背景 图 像 
09 } 

10 div{ width: 500px; /| 设置 层 的 宽度 
11 margin: auto; 

12 } 

13 h1 { width: 280px; 

14 height: 155px; 

15 background-image: url( 图 片 /logo.png); /文本 标题 的 背景 
16 text-indent: -9999em; // 将 标题 位 置 设 定 在 窗口 之 外 
呈 光 margin: 0; 

18 

19 img{ // 定 义 图 像 的 大 小 和 边框 样式 
20 width: 500px:; 

21 height: 150px; 

22 border: 1px solid white; // 设 置 边框 样式 
23 } 

24 p {padding:1em; 

25 Width: 500px:; 

26 } 

27 </style> 

28 </head> 

29 <body> 

30 <div> 

31 <h1>Sweet Rain</h1> 

32 <p> 黑 衣服 、 黑 领带 、 白 手套， 跟着 一 只 会 说 话 的 黑 狗 ， 这 是 "死神 " 千 叶 的 标准 装束 。 
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34 </p> 

35 <p> 当 死神 作出 不 同 于 以 往 的 判断 时 ， 超 脱 时 空 的 命运 之 轮 开 始 了 转动 ……</p> 
36 <img src=" 图 片 /dog.png" alt="sweet rain" /> <! 一 放 入 图 像 替 换文 本 

37 <p> 裁 断 生死 的 死神 因 一 念 之 差 放 了 一 名 女子 一 条 生路 ， 没 想到 就 此 引起 连锁 反应 ， 
- 

39 </p> 

40 </div> 

41 </body> 

42 </html> 


【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 11.7 所 示 。 


Wi ek i er R 


图 11.7 使 用 CSS 控制 图 像 的 技巧 
【深入 学 习 】 在 这 个 例子 中 ， 使 用 了 3 张 图 像 ， 分 别 是 “logo.png”、“dog.png” 和 “dogjpg”。 
页 面 背景 图 像 使 用 了 dogjpg。 在 “body” 样 式 表 中 ， 即 全 局 控制 情况 下 ， 设 置 背 景 图 像 ，“fixed” 表 
示 将 背景 图 像 固定 在 页 面 中 ， 不 随 着 页 面 内 容 滚动 ，“repeat-x” 表 示 在 横向 的 方向 上 重复 ， 所 以 如 果 
将 页 面 宽度 拉 长 ， 会 出 现 背 景 图 像 的 重复 现象 ， 如 果 想 避免 这 种 情况 ， 可 以 通过 修改 图 像 本 身 来 实现 。 


说 明 : fixed 的 完整 写法 应 该 是 background-attachment:fixed;。 


在 第 19 一 23 行 代码 中 ， 设 置 的 img 样式 表 用 来 控制 插入 图 像 的 大 小 和 边框 的 属性 。 在 代码 第 36 
行 中 插入 了 dog.png 这 张 图 像 。 

本 例 中 关键 的 部 分 是 如 何 使 用 图 像 替 换文 本 , 可 以 看 到 , 代码 第 31 行 中 <h1> 标 签 内 本 应 该 是 文本 
Sweet Rain, 注意 代码 第 14 一 18 行 这 个 样式 表 , 这 个 样式 表 hl 定义 的 框 模型 , 表明 背景 图 像 logo.png， 
事实 上 ， 在 最 终 的 效果 中 ， 确 实 是 一 张 图 像 ， 那 么 原来 的 文本 是 如 何 消失 的 呢 ? 其 实 ， 文 本 并 没有 消 
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失 ， 留 意 第 16 行 的 代码 “text-indent: -9999em;”， 表 示 文 本 框 内 的 文本 缩 进 -9999em 这 样 的 一 个 值 ， 
如 此 大 的 数值 作用 便 是 将 文本 推出 窗口 之 外 。 所 以 ， 最 终 的 效果 中 浏览 者 并 不 能 看 到 文本 。 


11.3.2 CSS 3.0 中 的 新 发 展 


最 近 W3C 组 织 起 草 了 新 的 CSS 3.0 标准 (截止 于 2008-9-10) 。 从 中 可 以 发 现 ， 在 新 的 标准 中 ， 
大 幅 扩展 了 background 和 border 属性 的 功能 。 主 要 表现 在 对 于 背景 图 像 和 边框 的 精细 修改 ， 如 修改 边 
框 的 border-radius， 它 能 使 直角 边框 改 成 圆 角 ， 其 效果 如 图 11.8 所 示 。 定 义 框 模型 下 的 文本 阴影 效果 
的 box-shadow 属性 ， 如 图 11.9 所 示 。 


border-radius: 55px 25px span{border:thin solid; 
box-shadow:0.2em 0.2em #ccci 


| 


He will be put on breadland watcy 


图 11.8 CSS 3.0 中 的 border-radius 属性 图 11.9 CSS 3.0 中 的 box-shadow 属性 


~ 说明: 资料 来 自 于 W3C 起 草 方案 中 的 两 个 示例 ， 如 读者 有 兴趣 了 解 更 多 ， 可 参考 


http://www.w3.org/TR/css3-background/。 


技术 总 是 在 不 断 进步 、 不 断 发 展 的 ， 但 所 有 技术 的 关键 核心 问题 都 是 基于 对 原理 的 理解 。 这 样 ， 
在 面 对 所 有 的 扩展 的 知识 上 ， 都 能 够 做 到 游 扩 有余、 快速 上 手 。 
11.3.3 ”Firefox 浏览 器 中 实现 圆 角 框 模型 

虽然 目前 万 7.0 还 未 能 有 效 支持 border-radius 属性 ， 相 信和 在 不 久 的 将 来 可 以 在 下 浏览 器 中 很 好 地 
实现 。 目 前 , 在 Firefox 浏览 器 中 已 经 可 以 通过 特殊 的 声明 来 实现 这 种 技术 了 。 这 些 以 -moz 开头 的 代码 
专门 适用 于 Firefox 浏览 器 的 属性 声明 ， 称 之 为 Moz-css。 这 有 时 也 是 一 种 针对 Firefox 浏览 器 的 Hack 
写法 。 其 中 就 有 -moz-border-radius， 它 的 作用 和 border-radius 一 样 ， 如 程序 11.4 的 页 面 在 Firefox 浏览 
器 下 的 情况 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 11 章 \11-4 ”Firefox 情况 下 的 圆 角 边框 .html】 

【实例 11-4】Firefox 情况 下 的 圆 角 边框 ， 其 源码 展示 如 下 : 


程序 11.4 ”Firefox 情况 下 的 圆 角 边框 -html 


01 <html> 

02 <head> 

03 <title>Firefox 情况 下 的 圆 角 边框 </title> 

04 <style type="text/css"> 

05 div { background-color:maroon; 

06 -moz-border-radius: 55px 15px; /修改 边框 的 圆 角 
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07 border 4px solid black: /| 设 定 边框 的 样式 
08 color:white; 

09 padding: 30px; // 设 置 页 面 的 空 距 
10 } 

11 </style> 

12 </head> 

13 <body> 

14 <div> 在 驾车 穿越 法 国 乡间 时 ， 塞 斯 "高 汀 看 到 一 群 又 一 群 好 像 从 童话 书 里 出 来 的 奶牛 。 
15 但 是 ”= 

16 </div> 

17 </body> 

18 </html> 


【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 11.10 所 示 。 


过 Ca 
图 11.10 ”Firefox 情况 下 的 圆 角 边框 
这 段 代 码 放 在 正 浏览 器 中 是 无 法 看 到 圆 角 效果 的 。 也 只 有 Firefox 浏览 器 能 解析 第 6 行 代码 。 


11.4 案例 : 有效 地 管理 页 面 布 局 


标准 化 工作 当然 表现 为 更 为 专业 的 设计 习惯 ， 本 节 将 介绍 一 种 YAHOO 公司 的 YUI Grids CSS 推 
广 的 布局 思路 。 这 是 一 种 很 好 的 布局 页 面 的 思路 ， 通 过 这 些 可 以 学 习 到 出 色 的 布局 经 验 ， 先 解决 什么 
问题 ， 再 解决 什么 问题 。 

(1) 设 定 页 面 的 宽度 ， 设 计 者 可 以 自由 地 确定 页 面 的 宽度 。 通 过 使 用 width 属性 来 固定 准确 的 页 
面值 ， 或 者 通过 百分比 来 确定 页 面 。 如 果 使 用 数值 ， 通 常设 置 在 900px 左右 ， 尽 量 不 要 低 于 700px， 那 
样 页 面 的 主体 就 显得 过 于 窄 小 了 。 如 果 是 通过 百分比 显示 ， 设 置 为 100%。 代 码 如 下 : 

<Style> 

#doc {width:750px; 

| 
#doc 2{width:950px; 


} 
#doc 3{width:100% 
| 
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#doc4 {width=974px: 
} 
</style> 


<div id="doc"> /1#doc 是 750px 宽 的 页 面 
</div> 

<div id="doc2"> lJ1#doc2 是 950px 宽 的 页 面 
</div> 

<div id="doc3"> //#doc3 是 100% 填 满 窗 口 的 页 面 
</div> 

<div id="doc4"> 儿 1#doc4 是 974px 宽 的 页 面 
</div> 


如 果 考虑 到 在 不 同 浏览 器 中 的 显示 结果 ， 那 么 ， 最 好 的 办 法 是 使 用 以 em 为 单位 来 设置 页 面 宽度 。 
由 于 不 同 的 浏览 者 也 许 会 设置 不 同 的 字体 大 小 ， 这 样 做 的 好 处 是 主动 去 适应 浏览 者 。 举 一 个 简单 的 例 
子 ， 样 式 表 如 果 写 为 : 

#custom-doc { margin: auto; 


Width:46.15em; // 在 非 IE 浏览 器 中 的 宽度 
*Width:45.00em; /在 IE 浏览 器 中 的 宽度 
min-width:600px; // 可 以 省 略 ， 推 荐 使 用 

} 


在 非 IE 浏览 器 中 如 果 设 置 页 面 宽度 为 46.15em， 那 么 这 个 长 度 相当 于 在 下 中 设置 页 面 宽度 为 
45em。 所 以 ， 这 是 一 种 CSS Hack 的 用 法 ， 为 了 避免 在 不 同 的 浏览 器 中 所 见 的 页 面 长 度 大 小 不 一 。 此 
外 ，margin=auto 可 以 避免 页 面 内 容 始 终 贴 着 浏览 器 的 左 侧 。 

(2) 接着 将 页 面 的 布局 分 为 3 个 部 分 。 一 个 作为 页 面 的 头 部 ， 一 个 作为 页 面 的 主体 ， 一 个 作为 页 
面 的 底部 。 相 对 于 这 3 个 部 分 设计 CSS 样式 表 ， 分 别 命名 样式 表 为 header、body 和 footer， 代 码 写 为 : 
<div id="doc"> 

<div id="hd"> l/header 

</div> 

<div id="bd"> llbody 

</div> 

<div id="ft"> llfooter 

</div> 

</div> 

(3) 在 页 面 的 主体 中 ， 可 以 进一步 细 分 主体 页 面 的 布局 ， 如 果 把 body 部 分 分 成 两 个 部 分 ， 分 为 
main-block 和 second-block。 原 理 上 设置 好 second-block 的 长 度 ， 而 main-block 将 使 用 second-block 剩 
余 的 宽度 。 代 码 如 下 所 示 : 


<div id="bd"> 


<div id="yui-main"> /yui-main 对 页 面 不 起 任何 作用 
<div class="yui-b">first</div> // 页 面 的 first 部 分 
</div> 
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<div class="yui-b">second</div> // 页 面 的 second 部 分 
</div> 


注意 : 在 这 里 ，yui-main 样式 表 不 具备 实际 意义 ， 它 是 一 个 未 定义 的 样式 表 ， 就 是 说 它 并 
不 能 影响 设计 者 的 页 面 效 果 。 但 是 ，YUI 这 么 做 的 意义 在 于 ， 令 second 内 容 比 first 内 容 更 容易 被 搜索 
引擎 优化 。 


(4) 设计 者 基于 这 样 的 基础 ， 可 以 考虑 作出 进一步 的 细 分 布局 。 将 main 部 分 的 布局 继续 一 分 为 
-， 那 么 使 用 这 种 技术 可 以 很 容易 地 做 到 内 容 的 嵌 套 。 定 义 一 个 yui-g 的 样式 表 媒 套 在 yui-b 中 ， 接 着 
把 这 部 分 内 容 一 拆 为 二 ， 将 其 中 一 部 分 定义 为 yui-u， 所 以 ， 此 时 代码 变 成 : 


<div id="yui-main"> 
<div class="yui-b"> 
<div class="yui-g"> 
<div class="yui-u first"></div> 
<div class="yui-u"></div> 
</div> 
</div> 
</div> 


一 注意: 在 class=yui-u first 这 个 定义 中 ， 使 用 了 伪 类 :first-child， 但 并 不 是 所 有 浏览 器 都 支持 
这 个 属性 ， 这 里 的 作用 是 给 yui-u 添加 额外 的 属性 ， 来 区 分 两 个 yui-u 的 性 质 ， 而 带 来 的 好 处 是 可 以 使 用 


浮动 层 来 划分 两 边 。 


最 后 ， 设 计 者 可 以 使 用 这 种 方法 不 停 地 堪 套 下 去 ， 但 是 要 注意 ， 如 果 嵌 套 的 子 布局 就 是 其 布局 的 
本 身 ， 它 不 需要 放 在 一 个 嵌 套 中 ， 如 以 上 代码 中 的 class=yui-g。 而 一 旦 划分 出 来 两 个 部 分 ， 一 定 要 区 
分 标注 其 中 的 一 个 为 first， 如 以 上 代码 再 拆 分 一 次 的 话 ， 代 码 是 : 


<div id="yui-main"> 
<div class="yui-b"> 
<div class="yui-g"> 
<div class=" Mug first"> 


在 原来 的 基础 上 继续 拆 
分 = 次 


<div class="yui-u first"></div> 
<div class="yui-u"></div> 


-igs 


</div> 
</div> 
</div> 
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这 一 次 将 yui-g 分 为 了 两 部 分 来 操作 , 如 此 反复 , 可 以 一 直 循环 下 去 , YAHOO 公司 基于 这 种 原理 ， 
开发 出 一 种 便捷 的 CSS 样式 表 布局 的 页 面 生成 工具 YUI:CSS Grid Builder， 有 兴趣 的 读者 可 以 去 尝试 


使 用 。 


说 明 : YUI:CSS Grid Builder 的 网 址 是 http://developer.yahoo.com/yui/grids/builder/。 


最 后 通过 实例 11-5 来 感受 一 下 这 种 方法 。 


【本 节 示 例 参考 ， 资 料 光盘 \ 第 11 章 \11-5 ”管理 你 的 页 面 布 局 .html】 
【实例 11-5】 管 理 你 的 页 面 布局 ， 其 源码 展示 如 下 : 


程序 11.5 管理 你 的 页 面 布 局 .html 


<IDOCTYPE HTML PUBLIC "-/W3C//DTD HTML 4.01/EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 


<html > 
<head> 
<title> 管 理 页 面 布局 </title> 
<style type=text/css> 
html{color: maroon; 
background: white; 


9 
body {font:16px/1.23 幼 圆 ; 
*font-size:small; 
text-align:center; 
b 
#doc{margin:auto; 
text-align:left; 
width:57.69em; 
*Width:56.25em; 
min-width:750px;. 
bs 
.bbbffloat:right: 
color:black; 
} 
div.first{ float:left; 
Width:74.2%; 


background:silver; 


font:1em 幼 圆 ; 
colorblack; 
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/设置 字体 为 小 号 


/使 页 面 能 够 居中 显示 


// 非 IE 浏览 器 下 的 页 面 宽度 
/IE 浏览 器 下 的 页 面 宽度 


// 页 面 主体 位 置 的 74.2% 
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28 padding:10px; 

29 } 

30 #bd {zoom:1; // 不 放大 对 象 的 大 小 和 比例 
31 } 

32 #ft {background:teal; /l#ft 是 页 面 的 底部 层 

33 font:1em 幼 圆 ; 

34 color:orange; 

35 padding:2px:; 

36 } 

37 </style> 

38 </head> 

39 <body> 

40 <div id="doc"> 

41 <div id="hd"> 

42 <p> 他 不 像 精神 病 或 一 般 小 说 上 所 记载 的 其 他 多 重 人 格 病 患 一 样 使 用 杜撰 的 假名 ， 


45 </div> 

46 <div id="bd"> 

47 <div class="main"> // 不 具备 实际 意义 的 #main 

48 <div class="bbb first"> 

49 <p> 初 次 见 到 这 位 廿 三 岁 的 年 轻 人 ， 是 在 俄亥俄 州 雅 典 市 的 雅典 心理 健康 中 心 ， 


52 </div> 
53 <div class="bbb"> 
54 <p> 几 天 之 后 ，《 新 闻 周刊 》 一 篇 名 为 《 比 利 的 十 个 面孔 》 文 章 最 


60 <div id="ft"> 
61 <p> 然 后 有 一 天 ， 令 人 惊异 的 事情 发 生 了 。 威 廉 . 密 里 根 第 一 次 完全 融合 


66 </body> 
67 </html> 


【运行 程序 】 浏 览 该 页 面 ， 最 终 的 结果 如 图 11.11 所 示 。 
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图 11.11 管理 你 的 页 面 布局 


注意 : 代码 第 30 和 31 行 ,zoom 属性 用 来 触发 layout 属性 , layout 是 一 个 IE/Win 的 私有 
概念 ， 它 决定 了 一 个 元 素 如 何 显示 以 及 约束 其 包含 的 内 容 ， 如 何 与 其 他 元 素 交 互 和 建立 联系 ， 如 何 响应 


和 传递 应 用 程序 事件 /用 户 事件 等 。zoom:1 表示 就 是 不 放大 对 象 的 大 小 和 比例 。 


此 外 ， 在 布局 页 面 时 ， 要 养 成 一 个 良好 的 定义 样式 表 命名 的 习惯 ， 如 表 11.1 所 示 。 


表 11.1 样式 表 命 名 

页 面 内 容 的 位 置 命名 习惯 
容器 container 
页 头 header 
内 容 content 
页 面 主体 main 
页 尾 footer 
左右 中 left right center 
导航 navigation 
栏目 column 
侧 栏 sidebar 
页 面 外 围 控制 整体 布局 宽度 wrapper 
主导 航 mainbav 
子 导航 subnay 
左 导航 leftsidebar 
顶 导航 topnav 
右 导航 rightsidebar 
底 导航 bottomnav 
标题 title 
摘要 Summary 
菜单 menu 
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续 表 

页 面 内 容 的 位 置 命名 习惯 
子 菜单 submenu 
边 导航 sidebar 
标志 logo 
登录 login 
登录 条 loginbar 
注册 regsiter 
加 入 joinus 
功能 区 shop 
搜索 search 
状态 status, 
按钮 button 
标签 页 tab 
文章 列表 list 
提示 信息 msg 
小 技巧 tips 

票 vote 
指南 guild 

告 banner 
热点 hot 
注释 note 
图 标 icon 
合作 伙伴 partner 
友情 链接 flink 
版 权 copyright 
下 载 download 


15 小 结 


在 第 10 章 的 基础 上 ， 本 章 介绍 了 如 何 职业 化 地 管理 好 你 的 页 面 布 局 ，CSS+DIV 是 一 种 流行 布局 
方式 ， 不 仅 是 一 项 时 瞩 的 技术 ， 更 是 一 门 值得 深究 的 学 问 。 在 了 解 的 基础 上 ， 只 有 熟练 才能 生 巧 。 
能 够 自由 地 在 窗口 中 布局 你 的 页 面 时 ，CSS 会 带 给 你 极 大 的 成 就 感 和 乐趣 。 本 章 3 
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框 模型 的 定位 ， 有 静态 定位 、 相 对 定位 、 绝 对 定位 和 固定 定位 。 
浮动 层 的 使 用 以 及 clear 属性 。 

在 页 面 中 使 用 图 像 ， 以 及 图 像 替 换 技术 。 

CSS 3.0 的 未 来 发 展 中 的 奇特 技术 ， 如 圆 角 、 阴 影 。 

YUI Grid CSS 的 重复 嵌 套 的 布局 方法 。 


E 要 的 知识 点 有 : 


当 


在 接 下 来 的 章节 中 ， 将 开始 接触 页 面 中 的 脚本 程序 ， 如 果 说 目前 的 网 站 前 端 开发 主力 技术 还 是 
CSS+DIV， 那 么 今后 的 页 面 玫 


f 发 是 属于 CSS+DIV+JavaScript 的 。 
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第 3 篇 动感 页 面 篇 


第 12 章 神奇 的 表单 
第 13 章 在 网 页 中 加 入 神奇 的 效果 
第 14 章 JavaScript 入门 


第 15 章 了 解 制作 页 面 的 工具 


第 12 章 和 神奇 的 表单 


本 章 将 真正 地 接触 DHTML， 之 前 的 所 有 网 页 浏览 者 只 能 看 到 ， 或 者 使 用 超 链接 去 浏览 另 一 个 页 
面 或 页 面 内 的 锚 点 ， 但 是 这 些 却 不 能 算是 动态 页 面 。 现 在 ， 大 多 数 网 站 都 具备 收集 用 户 信息 的 功能 ， 
如 发 表 留 言 、 输 入 账号 等 ， 这 些 动态 功能 都 是 通过 表单 来 实现 的 。 本 章 的 主要 知识 点 如 下 。 

口 表单 是 如 何 工 作 的 。 

口 ” 如 何 创建 表单 。 

口 不 同 功 能 多 种 样式 的 表单 。 

口 表单 域 能 够 做 些 什 么 。 


前 面 了 解 了 什么 是 JavaScript 程序 ， 而 事实 上 ， 要 分 清 两 个 概念 ， 
部 分 ， 另 一 个 是 该 如 何 去 触 发 JavaScript 程序 。 


一 个 是 什么 是 JavaScript 的 程序 


下 面 通过 一 个 简单 的 例子 来 了 解 一 下 ， 如 程序 12.1 所 


示 。 在 这 个 例子 中 ， 可 以 了 解 JavaScript 程序 和 表单 之 间 的 工作 关系 以 及 它们 是 如 何 合作 的 。 


【本 节 示 例 参考 ; 资料 光盘 \ 第 12 章 \12-1 


【实例 12-1】 计 算 珑 形 的 面积 ， 其 源码 展示 如 下 : 


程序 12.1 计算 矩形 的 面积 .html 
<html> 


<head> 
<title> 计 算 矩 形 的 面积 <jtitle> 
<style type=text/css> 
.result { font-weight: bold; 
} 
</style> 
<script language="JavaScript"> 
fe 


* 这 是 一 个 计算 矩形 面积 和 体积 的 JavaScript。 

* 定义 了 一 个 函数 作为 事件 。 

a 

function calculate() { 
”获取 用 户 输入 的 数据 */ 
var length = document.loandata.length.value; 
var width = document.loandata.width.value; 
var height = document.loandata.height.value; 
/* 获取 <span> 标 签 的 对 象 */ 


var area = document.getElementByld("area"); 


广 输出 计算 的 结果 */ 
area.innerHTML = length * width; 
volume.innerHTML = length * width * height; 
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23 } 
24 </script> 

25 </head> 

26 <body> 

2 <form name="loandata"> 

28 <table> 

29 <tr><td><b> 输 入 长 宽 高 的 数值 :</b></td></tr> 

30 <tr> 

31 <td>1) 矩形 的 长 度 是 :</td> 

32 <td><input type="text" name="length"></td> 

33 </tr> 

34 <t> 

35 <td>2) 矩形 的 宽度 是 :</td> 

36 <td><input type="text" name="width"></td> 

37 </tr> 

38 <t> 

39 <td>3) 和 矩形 的 高 度 是 :</td> 

40 <td><input type="text" name="height"></td> 

41 </tr> 

42 <tr><td></td> 

43 <td><input type="button" value=" 运 行 " onclick="calculate();"></td> 
44 </tr> 

45 <tr><td><b> 和 矩形 的 面积 和 体积 分 别 是 : </b></td></tr> 
46 <t> 

47 <td> 矩形 的 面积 :</td> 

48 <td><span class="result" id="area"></span></td> 
49 </tr> 

50 <tr> 

51 <td> 和 矩形 的 体积 : </td> 

52 <td><span class="result" id="volume"></span></td> 
53 </tr> 

54 </table> 

55 </form> 

56 </body> 

57 </html> 


【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 12.1 所 示 。 

【深入 学 习 】 代 码 第 8 一 24 行 这 部 分 是 一 个 JavaScript 的 小 程序 。 它 的 作用 是 计算 一 个 矩形 的 面积 
和 体积 。 那 么 ， 对 于 页 面 浏览 者 来 说 ， 如 何 才能 使 用 这 个 计算 矩形 的 小 程序 呢 ? 这 里 就 要 通过 表单 将 
小 程序 触发 ， 并 且 通 过 表单 使 这 个 程序 可 以 和 用 户 交 互 。 

从 实际 浏览 结果 来 看 (如 图 12.1 所 示 ) ， 其 中 可 以 由 用 户 输入 数据 的 功能 便 是 表单 的 作用 。 这 
部 分 代码 是 第 32、36、40、43、48、52 这 6 行 。 所 以 ， 当 用 户 输 入 长 度数 值 为 3、 宽 度数 值 为 4、 
高 度数 值 为 5 这 样 的 数值 时 ， 到 这 里 都 是 表单 在 起 作用 。 而 页 面 中 的 小 程序 只 负责 计算 出 矩形 的 面 
积 和 体积 。 
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Windows Internet Erer 


OO [BrvtmereWey) |x| | < 二 FE 
文件 (F) 拍 生 村 看 W) 中 总 天 [z) 工具 (T) 大 有 DP 

计 六 和 Bien 和 BR 一 | 全 -四 学 -全 -会 :” 
输入 卡 京 高 的 数值 

1) 短 形 的 长 广 是 : 5 

号 短 形 的 充 度 是 : 5 

3) 短 形 的 高 度 是 : 


Ei] 
矩形 的 面积 和 体积 分 别 是 。 
矩形 的 面积 ， 


矩形 的 体 术 ; 


图 12.1 计算 矩形 的 面积 


注意 : 在 本 章 中 ， 重 点 讨论 如 何 使 用 表单 来 触发 JavaScript 的 程序 ， 如 何 配合 设计 者 来 表 


现 页 面 中 的 表单 。 而 什么 是 JavaScript 程序 将 在 后 面 的 章节 中 介绍 。 


| 


表单 的 工作 原理 


表单 最 重要 的 表现 就 是 在 客户 端 接收 用 户 的 信息 , 然后 将 数据 递交 给 后 台 的 程序 来 操控 这 些 数据 。 
从 技术 的 概念 上 来 说 ， 表 单 就 是 用 来 操作 form 对 象 ， 对 象 是 一 种 基本 的 数据 类 型 。 


12.1.1 <script> 标 记 


JavaScript 程序 的 调用 类 似 于 CSS 样式 表 , 可 以 像 嵌 入 式样 式 表 一 样 放 在 <head> 标 签 中 , 也 可 以 像 
外 联 样式 表 一 样 通过 链接 来 引用 。 所 以 ， 当 放 到 <head> 标 签 中 使 用 时 ， 需 要 通过 <script> 标 记 命 令 行 ， 
如 程序 12.1 中 第 8 行 和 第 24 行 。 浏 览 器 通过 <script> 标 签 获得 分 析 程 序 的 信息 ， 来 告诉 浏览 器 使 用 的 
是 哪 种 语言 的 脚本 ， 如 程序 12.1 中 第 8 行 。 


<script language="JavaScript"> 


告诉 浏览 器 ， 这 是 JavaScript 脚本 。 
如 果 是 通过 引用 外 部 JavaScript 程序 ， 就 像 链接 外 联 样式 表 那 样 ， 那 么 代码 应 该 写成 : 
<script type="text/javascript" src="some.js"> 


</scirpt> 


说 明 : JavaScript 程序 的 后 缀 名 是 js。JavaScript 的 程序 设计 参考 第 13、14 章 。 
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12.1.2 ”创建 表单 


创建 一 个 表单 看 上 去 就 像 创 建 表格 ,表格 的 单元 格 、 行 、 列 都 放 在 <table> 标 签 中 , 而 表单 通过 <form> 
标签 来 创建 ， 其 中 放置 表单 的 对 象 ， 如 表单 域 、 按 钮 和 其 他 事物 。 

<form> 标 签 中 可 扩展 几 个 属性 ， 分 别 是 action、method、name、enctype 和 target 属性 。action 属性 
表示 将 数据 传送 到 指定 的 URL 地 址 ，method 属性 的 值 告诉 浏览 器 通过 怎样 的 方式 来 提交 数据 ，name 
属性 保证 了 表单 数据 能 够 被 程序 识别 。 还 有 enctype 属性 和 target 属性 ， 前 者 用 来 表示 编码 方式 ， 后 者 
用 来 表示 目标 的 显示 方式 。 

1. action 属性 

通过 <form> 标 签 定义 的 表单 ， 它 里 面 必须 有 action 属性 才能 将 表单 中 的 数据 提交 出 去 。 如 这 句 代 
码 所 示 : 


<form action="some.php"> 

</form> 

它 表明 的 是 这 个 表单 的 作用 是 用 来 提交 some.php 这 个 页 面 中 的 数据 。 
2. method 属性 


method 属性 的 作用 是 告诉 浏览 器 数据 是 以 何 种 方式 提交 出 去 的 。method 属性 下 可 以 有 两 个 选择 : 
post 或 者 get。 默认 情况 下 , 数据 被 提交 的 方式 是 get, 表单 域 中 输入 的 内 容 会 添加 在 action 指定 的 URL 
中 。 当 表单 提交 之 后 ， 用 户 便 获 得 一 个 明确 的 URL。 由 于 这 种 方式 下 数据 会 添加 到 URL 中 ， 所 以 ,可 
利用 的 一 个 好 处 是 可 以 保存 在 收藏 夹 中 和 他 人 分 享 , 直接 访问 主页 的 URL 可 以 达到 和 填写 注册 后 一 样 
的 效果 。 如 有 些 时 候 ， 用 户 将 自己 已 经 注册 过 的 一 些 网 站 主页 加 入 到 自己 的 收藏 来 ， 再 次 从 收藏 夹 中 
打开 时 ， 会 发 现 已 经 是 登录 的 状态 。 而 post 这 种 方式 ， 数 据 将 以 HTTP 头 的 形式 发 送 ， 表 单数 据 不 再 
是 URL 中 的 一 部 分 。 

这 两 种 方式 的 区 别 在 于 ，get 在 安全 性 上 较 差 . 所 有 表单 域 的 值 直接 呈现 。 而 post 除了 可 见 的 处 理 
脚本 程序 以 外 ， 别 的 东西 都 可 以 隐藏 。 所 以 在 实际 运用 时 ， 通 常 选择 post 这 种 处 理 方式 。 

3. name 属性 

添加 name 属性 是 为 了 令 递交 出 去 的 表单 数据 能 够 被 处 理 这 些 数据 的 程序 识别 。 在 大 部 分 页 面 中 ， 
很 可 能 放 入 的 表单 不 止 一 个 , 那么 就 要 通过 给 不 同 的 表单 起 不 同 的 名 字 , 使 于 程序 来 识别 , 如 程序 12.1 
中 的 第 27 行 。 

<form name="loandata"> 

这 里 将 表单 命名 为 loandata， 而 在 第 15 行 : 

var length = document.loandata.length.value; 


表示 通过 表单 loandata 获取 输入 的 length 项 数值 。 如 果 代 码 中 有 很 多 不 同 的 表单 ， 那 么 通过 name 
就 可 以 区 分 它们 。 
4. 编码 方式 
enctype 代 表 HTML 表单 数据 的 编码 方式 , 分别 有 application/x-www-form-urlencoded、multipart/form-data 
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和 text/plain 共 3 种 方式 。application/x-www-form-urlencoded 是 标准 的 编码 方式 ， 提 交 的 数据 被 编码 为 
名 称 / 值 对 。mnultipartform-data 属性 表示 数据 编码 为 一 条 信息 ， 为 表单 定义 了 MIME 编码 方式 , 创建 了 
一 个 与 传统 不 同 的 POST 缓冲 区 ， 页 面 上 每 个 控件 对 应 消息 中 的 一 个 部 分 。text/plain 表示 数据 以 纯 文 
本 的 形式 进行 编码 ， 这 样 在 信息 中 将 不 包含 控件 或 格式 字符 。 


人 注意 : multipart/form-data 方式 上 传 文件 时 ， 不 能 使 用 post 属性 。 


5. 目标 显示 方式 

表示 在 何 处 打开 目标 URL。 可 以 设置 4 种 方式 ，_blank 表示 在 新 的 页 面 中 打开 链接 ，_self 表示 在 
相同 的 窗口 中 打开 页 面 ，_parent 表示 在 父 级 窗口 中 打开 页 面 ，_top 表示 将 页 面 载 入 到 包含 该 链接 的 窗 
口 ， 取 代 任 何 当前 在 窗口 中 的 页 面 。 

所 以 ， 一 个 完整 的 <from> 标 记 如 下 所 示 : 

<from action="mailto:depp59@gmail.com" 


method="post" 

name="some" 

enctype="text/plain" 

"target="_blank"> 
</form> 


这 段 代码 表明 这 个 表单 的 动作 是 发 送 到 邮箱 depp59@gmail.com， 使 用 post 的 传输 方式 ， 使 用 
text/plain 编码 方式 的 some 表单 ， 使 之 在 新 页 面 中 打开 。 
12.1.3 ”表单 域 

表单 域 是 用 户 输入 数据 的 地 方 。 说 得 形象 一 些 ， 就 相当 于 是 用 户 给 程序 下 命令 或 者 给 指示 的 聊天 
窗口 。 当 然 ， 这 种 下 命令 的 方式 有 许多 ， 如 最 常见 的 文本 域 (参考 第 2 章 中 实例 2-1， 其 中 就 包含 了 一 
个 简单 的 文本 域 表单 ) 、 下 拉 列 表 等 。 表 单 域 可 分 为 input、textarea 和 select 3 个 对 象 ， 其 中 ， 大 部 分 


类 型 的 表单 形式 都 通过 input 属性 来 实现 ，textarea 和 select 创建 一 种 控制 类 型 。 在 12.2 节 中 ， 将 重点 
分 析 依 赖 这 些 对 象 实现 的 表单 类 型 。 


12.2 ”通过 表单 展示 不 一 样 的 页 面 


表单 中 包含 多 种 不 同样 式 、 不 同 功 能 的 提交 数据 的 方式 。 在 许多 页 面 中 ， 浏 览 者 不 经 意 间 已 经 不 
断 地 在 使 用 表单 的 功能 ， 如 留言 、 设 置 自己 的 密码 ， 或 者 复 选 框 、 下 拉 列 表 等 。 不 同 的 功能 实现 不 同 
的 作用 。 
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12.2.1 input 对 象 下 的 多 种 表单 表现 形式 


通常 ,在 页 面 中 见 到 的 大 部 分 表单 的 形式 都 是 通过 输入 标记 input 来 实现 的 ， 一 个 简单 的 样式 看 上 
去 可 以 是 这 样 的 : 

<input name="™ 

type=” 
value="™ 
size=™ 
maxlength=” > 
口 name: 表示 输入 数据 的 名 字 ， 它 的 作用 也 是 为 了 让 程序 明白 所 提交 的 数据 ， 如 程序 12.1 中 
第 32 行 。 

<input type="text" name="length"> 

这 个 输入 的 数据 被 命名 为 length， 在 第 15 行 中 : 

var length = document.loandata.length.value; 

前 面 的 一 个 length 是 程序 定义 的 标识 符 为 length， 后 面 的 一 个 length 则 是 表示 获取 通过 第 32 行 提 
交 的 length 数值 。 如 果 第 32 行 中 缺少 了 这 样 一 个 name 属性 ， 虽 然 在 浏览 器 中 显示 没有 什么 变化 ， 但 
事实 上 ， 后 台 程序 或 JavaScript 程序 就 不 能 获得 提交 的 数据 。 

口 type: 表示 所 定义 的 是 哪 种 类 型 的 表单 形式 , 该 属性 有 9 个 可 选 值 , 每 个 类 型 都 有 自己 的 功能 ， 

如 表 12.1 所 示 。 


表 12.1 样式 表 命名 

名 称 功 能 
text 单行 的 文本 框 
password 将 文本 替换 为 “*” 的 文本 框 
checkbox 只 能 做 二 选 一 的 是 或 否 选择 
radio 从 多 个 选项 中 确定 的 一 个 文本 框 
submit 确定 命令 文本 框 
hidden 设 定 不 可 被 浏览 用 户 修改 的 数据 
image 用 图 片 表示 的 确定 符号 
file 设置 文件 上 传 
button 用 来 配合 客户 端 脚本 


口 size: 表示 文本 框 字段 的 长 度 。 
口 maxlength: 表示 可 输入 的 最 长 的 字符 数量 。 
口 “value: 表示 预先 设置 好 的 信息 。 


12.2.2 text 文本 框 的 样式 表单 


text 样式 下 的 文本 框 是 一 个 单行 的 文本 框 ， 比 较 常见 于 “登录 ”这 样 的 使 用 ， 如 程序 12.2 是 一 个 
有 着 text 样式 的 表单 。 
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【本 节 示 例 参考 : 资料 光盘 \ 第 12 章 \12-2 text 样式 的 表单 .html】 
【实例 12-2】text 样式 的 表单 ， 其 源码 展示 如 下 : 
程序 12.2 text 样 式 的 表单 .html 


01 <html> 
02 <head> 
03 <style type="text/css"> 
04 div { width:400px; 
05 font 180% ”微软 雅 黑 ; 
06 margin:auto; // 使 页 面 内 容 居中 
07 padding:10px:; // 空 距 是 10px 
08 text-align:right; 
09 } 
10 input {font: 50% ”微软 雅 黑 ; // 表 单 内 的 字体 
11 } 
12 </style> 
13 </head> 
14 <body> 
15 <div> 
16 <form action="..." method="post"> 
17 输入 用 户 名 : <input name="name" type="text" size="20" maxlength="12"> 
18 <br> 输 入 邮箱 地 址 : <input name="address" type="text" size="20" 
19 maxlength="20"> /| 设置 放 入 文本 的 表单 域 
20 </form> 
21 </div> 
22 </body> 
23 </html> 
【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 12.2 所 示 。 


tex 样式 的 表单 -Windows Internet Explorer TOOD 因 
SO- Erp) x 

文件 (F) ”编辑 (E) ”查看 (V) ”收藏 于 (A) ”工具 (T) 帮助 (H) 

安 安 | 乱 text 样 区 的 表单 全 目 ”总 上 - 全 


六 


输入 用 户 名 : depp 
输入 邮箱 地 址 : depps9@omailcom 


12.2 text 样式 的 表单 
【深入 学 习 】 注意 第 17 和 18 行 , 其 中 size 属性 定义 了 文本 框 的 长 度 ， 而 maxlength 属性 定义 了 这 
个 文本 框 最 多 只 能 输入 12 个 字符 。 如 果 超 出 这 个 长 度 ， 数 据 将 不 能 被 输入 。 而 这 两 个 text 样式 的 数据 
定义 了 不 同 的 名 字 。 这 很 关键 ， 否 则 一 旦 需要 被 程序 调用 ， 数 据 将 无 法 被 辨认 。 此 外 ， 可 以 发 现 ， 表 
单 也 是 可 以 通过 CSS 样式 表 来 控制 的 。 
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这 是 一 个 可 以 将 文本 使 用 保密 形式 展示 出 来 的 一 个 功能 ， 最 常见 的 使 用 莫 过 于 密码 的 设置 。 根 据 
不 同 的 浏览 器 ， 会 使 用 点 状 形态 或 者 星 号 符 来 表示 ， 如 果 在 程序 12.2 中 表单 部 分 代码 写 为 : 


<form action="..." method="post"> 


输入 用 户 名 : <input name="name" type="text" size="20" maxlength="12"> 


<br> 输 入 邮箱 地 址 : <input name="address" type="text" size="20" maxlength="20"> 
<br> 输 入 密码 : <input name="secret" type="password" size="20" maxlength="20"> 


</form> 


那么 ， 这 段 代码 的 结果 显示 为 如 图 12.3 所 示 。 


Bh NR Wo menu [J oe 
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输入 用 户 名 : see 
输入 邮箱 地 址 * |depp59@gmailcom 
输入 密码 : | 


图 12.3 ”password 样式 的 表单 


12.2.4 ”checkbox 复 选 框 的 样式 表单 


checkbox 是 一 个 复 选 框 的 创建 方式 ， 类 似 于 一 个 开关 的 on 和 off 选 项， 浏览 器 会 在 选择 栏 前 面 提 
供 一 个 方形 小 框 。 如 果 选 择 符合 的 意思 ， 小 框 中 会 添加 小 勾 符号 表示 被 选中 ， 如 程序 12.3 是 一 个 


checkbox 样式 的 表单 。 


【本 节 示 例 参考 : 资料 光盘 \ 第 12 章 \12-3 checkbox 样式 的 表单 .html】 


【实例 12-3】checkbox 样式 的 表单 ， 其 源码 展示 如 下 : 


程序 12.3 ”checkbox 样 式 的 表单 .html 


01 <html> 

02 <head> 

03 <title>checkbox 样式 的 表单 </title> 
04 <style> 

05 body { font: 100% ”微软 雅 黑 ; 

06 } 

07 #leftblock{position:absolute; 

08 ‘width:100px; 

09 font: 120% ”微软 雅 黑 ; 
10 text-align:right; 
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11 证 
12 #rightblock {position:absolute; //##rightblock 在 页 面 设置 为 绝对 定位 
13 width:300px; 
14 left:120px: // 设 置 #rightblock 在 页 面 中 的 位 置 
ee padding:5px; 
16 border:2px dotted ; // 设 置 表单 域 的 边框 样式 
17 text-align:left; 
18 > 
19 input {font: 50% ”微软 雅 黑 ; 
20 ! 
21 h1 {font: 80% ”微软 雅 黑 ; 
22 margin:5; } 
23 </style> 
24 </head> 
25 <body> 
26 <div id="leftblock"> 注 册 信 息 :</div> 
27 <div id="rightblock"> 
28 <form action="..." method="post"> 
29 <input name="truename" type="checkbox" checked="checked"> 使 用 真实 姓名 
30 <h1> 实 名 制 可 以 方便 您 更 好 地 和 朋友 交流 </h1> 
31 <input name="address" type="checkbox" checked="checked"> 显 示 我 的 地 址 
32 <! 一 checked="checked" 使 复 选 框 默认 为 选中 状态 --> 
33 <h1> 如 果 去 除 勾 选 ， 其 他 用 户 将 无 法 查 到 你 的 地 址 </h1> 
34 <input name="mail" type="checkbox" checked="checked"> 可 以 给 我 发 邮件 
5 <h1> 如 果 勾 选 ， 我 们 将 会 为 你 发 送 来 自 广告 商 的 信息 </h1> 
36 </form> 
37 </div> 
38 </body> 
39 </html> 
【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 12.4 所 示 。 


i ee 3 


勾 符 号 会 被 默认 添加 


ja | 


12.4 ”checkbox 样式 的 表单 


【深入 学 习 】 表 单 的 代码 是 第 28 一 36 行 ， 在 表单 中 添加 checked="checked"， 表示 复 选 框 默认 值 设 
置 为 checked， 那 么 勾 符号 会 被 默认 添加 ， 如 图 12.4 所 示 。 
*»206°* 


12.2.5 ”radio 单 选 按钮 的 样式 表单 
radio 样式 有 点 类 似 于 选择 题 ， 在 一 组 选项 中 选 出 唯一 的 一 项 ， 发 送 这 列 数据 。 使 用 的 方法 上 给 同 
一 组 选项 定义 为 同一 名 字 ， 但 是 通过 value 属性 来 辨识 它们 之 间 的 不 同 。 有 具体 的 使 用 如 程序 12.4 页 面 
radio 样式 的 表单 。 
【本 节 示 例 参考 : 资料 光盘 \ 第 12 章 \12-4 radio 样式 的 表单 .html】 
【实例 12-4】radio 样式 的 表单 ， 其 源码 展示 如 下 : 
程序 12.4 ”radio 样 式 的 表单 .html 


01 <form action="..." method="post"> 
02 <input name="onechoice" type="radio" value="one" checked="checked"> 使 用 邮箱 注册 


03 /设置 radio 样式 表单 的 属性 

04 <h1> 您 可 以 通过 自己 习惯 的 邮箱 来 作为 账号 登录 网 站 </h1> 

05 <input name="onechoice" type="radio" value="two"> 通 过 手机 注册 

06 <h1> 您 可 以 通过 手机 免费 获得 我 们 的 账号 </h1> 

07 <input name="onechoice" type="radio" value="three"> 申 请 我 的 1D 号 码 
08 <h1> 您 可 以 通过 网 站 直接 申请 账号 </h1> 

09 </form> 


【运行 程序 】 将 程序 12.4 中 第 28 一 36 行 的 form 表单 蔡 换 为 上 面 的 radio 样式 的 表单 代码 , 最 终 页 
面 的 显示 效果 如 图 12.5 所 示 。 
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12.5 radio 样式 的 表单 
【深入 学 习 】radio 样式 的 表单 是 一 个 多 选 一 的 表单 功能 , 同样 ,这 里 也 可 以 使 用 checked="checked" 
语句 来 确定 预先 选中 的 一 项 。 当 选择 唯一 的 目标 后 ， 这 个 选项 将 会 以 数据 形式 被 发 送 。 所 以 ， 这 里 必 
须 给 input 对 象 设 定 value 值 ， 而 且 不 同 对 象 的 value 值 也 不 能 相同 ， 和 否则 数据 无 法 被 辨认 ， 如 这 个 表 
单 中 value 属性 值 依次 设置 的 是 one、two 和 three， 互 不 相同 。 
12.2.6 submit 提交 数据 的 样式 表单 


submit 属性 创建 一 个 按钮 ， 一 个 按钮 的 作用 就 是 提交 数据 。 当 然 准确 点 说 ，submit 属性 负责 “ 提 
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交 ” 这 样 的 一 个 动作 。 当 单 击 “ 提 交 ” 按 钮 时 ， 数 据 会 发 送 到 表单 指定 的 地 方 。 如 果 将 程序 12.3 中 的 
checkbox 表单 修改 为 submit 表单 。 那 么 ，submit 的 表单 样式 的 写法 如 程序 12.5 所 示 。 
【本 节 示 例 参考 : 资料 光盘 \ 第 12 章 \12-5 ”submit 样式 的 表单 .html】 


【实例 12-5】submit 样式 的 表单 ， 其 源码 展示 如 下 : 
程序 12.5 ”submit 样 式 的 表单 .html 


01 <form action="..." method="post"> 
02 <input name="onechoice" type="radio" value="one" checked="checked"> 使 用 邮箱 注册 
03 <h1> 您 可 以 通过 自己 习惯 的 邮箱 来 作为 账号 登录 网 站 </h1> 
04 <input name="onechoice" type="radio" value="two"> 通 过 手机 注册 
05 <h1> 您 可 以 通过 手机 免费 获得 我 们 的 账号 </h1> 
06 <input name="onechoice" type="radio" value="three"> 申 请 我 的 ID 号 码 
07 <h1> 您 可 以 通过 网 站 直接 申请 账号 </h1> 
08 <br> 
09 <input type="submit" value=” 确 定 "> 
10 </form> 
【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 12.6 所 示 。 
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图 12.6 ”submit 样式 的 表单 
【深入 学 习 】 如 图 12.6 中 所 示 ， 有 一 个 醒目 的 “确定 ”按钮 。 它 就 是 通过 代码 第 9 行 来 实现 的 ， 
这 也 是 一 个 submit 属性 提交 表单 数据 的 按钮 。 其 中 ， 通 过 value 属性 ， 设 计 者 可 以 修改 按钮 上 显示 的 
内 容 。 
此 外 ， 和 submit 属性 类 似 的 还 有 一 个 reset 属性 ， 这 是 一 个 复位 按钮 。 当 被 单 击 时 ， 表 单 的 内 容 会 
被 重新 设置 ， 回 到 页 面 的 初始 状态 。 它 的 代码 和 submit 样式 类 似 ， 代 码 如 下 : 
<input type="reset" value=” 恢复 "> 


说 明 : 创建 submit 按钮 或 reset 按钮 时 ，name 属性 不 是 必需 的 。 
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12.2.7 _ hidden 隐藏 域 的 样式 表单 


hidden 属性 可 以 创建 一 个 隐藏 域 ， 数 据 会 被 隐藏 起 来 。 因 此 用 户 是 无 法 被 操作 的 ， 这 样 说 来 似乎 
hidden 没有 什么 作用 。 事 实 上 ， 正 是 出 于 安全 的 考虑 ， 在 多 步 操作 数据 的 同时 ， 用 hidden 来 记录 页 面 
的 数据 并 将 它 隐藏 起 来 ， 这 些 数 据 通常 是 用 户 并 不 关心 的 ， 但 必须 是 被 提交 的 数据 ， 如 它 可 能 是 用 户 
操作 时 的 特殊 数据 ， 用 户 并 不 在 意 ， 但 必须 被 提交 。 

然后 当 页 面 跳 转 到 下 一 个 页 面 的 同时 ， 页 面 已 经 继承 第 一 个 页 面 的 数据 ， 但 用 户 是 看 不 到 的 。 最 
后 ， 将 用 户 提交 的 所 有 数据 一 并 发 送 至 服务 器 。 

通常 这 种 方式 运用 于 动态 页 面 制作 ， 当 填写 好 第 一 张 表 单 时 ， 处 理 表单 的 脚本 程序 可 以 动态 地 生 
成 第 二 张 表单 。 同 时 ， 其 中 包含 了 第 一 张 表单 的 一 些 数 据 ， 如 它们 可 能 看 上 去 是 这 样 的 : 

<form action=some.asp> 

<input type=hidden name=somehidden value=some> 

<input type=submit value= 下 一 页 > 

</form> 

当 单 击 “ 下 一 页 ”按钮 ， 跳 转 到 第 二 个 页 面 时 ， 页 面 会 记录 第 一 个 页 面 中 的 数据 : <%=request 


("somehidden")%>。 


注意 : 通过 HTML 页 面 源码 可 以 查看 该 元 素 属性 的 值 ， 所 以 不 要 使 用 hidden 来 传送 敏感 信 


息 ， 如 密码 、 手 机 号 码 等 。 


12.2.8 image 样式 的 表单 
image 样式 的 表单 看 上 去 就 像 是 在 页 面 中 放 入 图 像 ， 或 者 又 有 些 类 似 于 图 像 替 换文 本 的 技术 ,， 那 不 
妨 将 其 看 作 是 用 图 像 替 换 按钮 的 技术 。 当 图 像 被 单 击 时 ， 数 据 一 并 被 提交 至 服务 器 ， 代 码 如 下 : 
<input type="image" src=" 图 片 /小 图 标 .jpg" alt=” 确 定 "> 


同样 在 编辑 图 像 时 ， 使 用 src 属性 指定 这 张 图 像 的 路 径 ， 使 用 alt 属性 来 添加 文本 注释 。 它 的 效果 
如 图 12.7 所 示 。 


图 12.7 image 样式 的 表单 
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如 图 12.7 所 示 , 提交 按钮 被 替换 成 一 个 小 小 的 图 像 。 当 单 击 图 像 时 , 其 作用 就 相当 于 submit 按钮 。 
不 过 ， 当 表单 数据 被 提交 的 同时 ， 用 户 所 单 击 的 图 像 的 位 置 坐 标 也 会 被 发 送 ， 就 像 这 样 : 


image.x=23 
image.y=59 


不 仅仅 是 使 用 图 像 作为 按钮 ， 表 单 中 还 有 一 种 触发 事件 的 button 表单 。button 样式 顾名思义 ， 它 
只 是 一 个 按钮 ， 单 个 button 按钮 并 不 会 提交 任何 数据 ， 它 的 作用 是 用 来 调用 前 端 页 面 ， 即 客户 端的 脚 
本 程序 ， 如 程序 12.1 的 第 43 行 用 来 调用 一 个 简单 计算 的 JavaScript 脚本 。 

<input type="button" value=" 运 行 " onclick="calculate();"> 


12.2.9 ”file 上 传 文件 的 样式 表单 


file 样式 的 表单 允许 用 户 上 传 自己 的 文件 ， 这 在 论坛 、 社 区 类 型 的 网 站 中 经 常 遇 到 。 例 如 ， 用 
户 上 传 自己 的 图 像 给 服务 器 , 用 来 改变 用 户 在 不 同 网 站 上 的 形象 图 片 。 程 序 12.6 所 示 就 是 fle 样式 
的 表单 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 12 章 \12-6 file 样式 的 表单 .html】 

【实例 12-6】file 样式 的 表单 ， 其 源码 展示 如 下 : 


程序 12.6 ”file 样 式 的 表单 .html 


01 <html> 

02 <head> 

03 <title>file 样式 的 表单 </title> 

04 <style type="text/css" > 

05 body {font: 120% 微软 雅 黑 ; // 设 置 页 面 字体 的 样式 
06 } 

07 input ffont100% 微软 雅 黑 ; /设置 表单 中 按钮 字体 的 样式 
08 } 

09 </style> 

10 </head> 

11 <body> 

12 上 传 我 的 文件 : 

13 <form action="..." method="post" enctype="multipart/form-data"> 
14 <input type="file" name="uploadfile" id="uploadfile" /> 

15 </form> 

16 </body> 

17 </html> 


【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 12.8 所 示 。 
【深入 学 习 】 需 要 注意 的 是 ， 当 使 用 file 样式 的 表单 时 ， 必 须 在 form 标签 中 说 明 编 码 方式 ， 如 
enctype="multipart/form-data"。 这 样 ， 服 务 器 才能 接收 到 正确 的 信息 。 
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上 传 我 的 文件 : 


图 12.8 file 样式 的 表单 


12.3 ”textarea 对 象 的 表单 


textarea 对 象 就 像 是 input 对象 中 text 样式 的 表单 ， 只 不 过 是 扩展 过 的 text 样式 表单 ， 可 以 通过 行 
(rows) 属性 和 列 (cols) 属性 来 编辑 文本 域 的 大 小 ， 最 常见 于 留言 板 、 论 坛 中 回帖 时 的 文本 框 等 ， 如 
程序 12.7 的 textarea 对 象 的 表单 。 


【本 节 示 例 参考 : 资料 光盘 \ 第 12 章 \12-7 textarea 对 象 的 表单 .html】 
【实例 12-7】textarea 对 象 的 表单 ， 其 源码 展示 如 下 : 


程序 12.7 textarea 对 象 的 表单 .html 
<html> 
<head> 
<title>textarea 对 象 的 表单 </title> 
<style type="text/css" > 
body {font 120% 微软 雅 黑 ; /设置 页 面 字体 的 样式 


} 
textarea {font:80% 微软 雅 黑 ; 


color:navy; // 设 置 文 本 域 字体 颜色 
} 
</style> 
</head> 
<body> 
留言 板 


<form action="..." method="post" enctype="multipart/form-data"> 
<textarea name="some" rows="10" cols="50” value="say"> 请 文明 用 语 : 
</textarea> 
</form> 
</body> 
</html> 


【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 12.9 所 示 。 
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图 12.9 textarea 对 象 创建 的 留言 板 


【深入 学 习 】textarea 属性 标签 是 必须 要 封闭 的 ， 如 代码 第 15 行 和 第 16 行 。 此 外 ， 在 <textarea> 
标签 中 放 入 文本 ， 如 代码 第 15 行 中 “请 文明 用 语 : ”， 那 么 在 生成 页 面 时 ， 会 预先 设置 好 文本 ， 它 可 
以 给 用 户 带 来 亲切 的 感受 ， 但 同时 ， 用 户 不 得 不 先 删除 预先 的 文本 再 编辑 自己 的 内 容 ， 所 以 如 何 取 舍 
就 要 因地制宜 了 。 


说 明 : 当 在 文本 框 中 输入 的 内 容 超出 预先 设置 的 行 数 时 ， 会 自动 出 现 滚动 条 。 如 果 没 有 超 


出 文本 框 的 范围 ， 滚 动 条 呈 灰 色 状 。 


12.4 select 对 象 的 表单 


select 对 象 的 表单 将 创建 出 一 个 列表 样式 的 表单 ， 显 示 为 出 现 一 个 下 拉 列 表 框 ， 令 用 户 可 以 方便 地 
选择 其 中 一 个 目录 。 通 常 ， 在 一 些 要求 户 口 填写 地 区 、 生 日 等 信息 中 ， 设 计 者 可 以 给 使 用 者 准备 好 选 
项 ， 为 了 令 使 用 者 填写 信息 时 方便 ， 在 代码 的 写法 中 需要 使 用 <option> 标 签 来 定义 可 供 选 择 的 每 一 项 ， 
如 程序 12.8 页 面 中 select 对 象 的 表单 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 12 章 \12-8 ”select 对 象 的 表单 .html】 

【实例 12-8】select 对 象 的 表单 ， 其 源码 展示 如 下 : 


程序 12.8 ”select 对 象 的 表单 .html 


01 <html> 

02 <head> 

03 <title>select 对 象 的 表单 </title> 

04 <style type="text/css" media="all"> 

05 body {font: 120% 微软 雅 黑 ; 

06 } 

07 select {font:80% 微软 雅 黑 ; 

08 color:red; /l/select 对 象 的 表单 中 文本 字体 颜色 
09 } 

10 </style> 
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11 </head> 
12 <body> 
13 <form action="™"> 
14 地 址 : 
5 <select name=" 上 海 "> 
16 <option> 黄 浦 区 </option> // 这 里 是 提供 的 每 个 选项 的 内 容 
17 <option> 虹 口 区 </option> 
18 <option> 静 安 区 </option> 
19 <option> 长 宁 区 </option> 
20 <option> 杨 浦 区 </option> 
21 <option> 宝 山区 </option> 
2 <option> 浦 东 新 区 </option> 
23 <option> 徐 汇 区 </option> 
24 <option> 普 陀 区 </option> 
25 </select> 
26 </form> 
27 </body> 
28 </html> 
【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 12.10 所 示 。 
Be We er a 
ne 
地 址 一 


图 12.10 select 对 象 的 表单 
【深入 学 习 】 用 户 可 以 通过 下 拉 列 表 框 选择 一 个 “地 址 ”， 而 这 个 数据 则 会 被 表单 发 送 到 服务 器 。 
此 外 , 还 可 以 使 用 value 属性 为 每 一 个 option 指定 不 同 的 值 。 如 果 是 这 样 ,value 设置 的 值 将 取代 option 
的 文本 内 容 。 


~ 注意 : 如 果 设 计 者 希望 预先 设置 初始 值 , 那么 在 所 希望 的 option 中 添加 selected="selected" 
就 可 以 了 ， 如 <option selected="selected"> 浦 东 新 区 </option>。 


此 外 ， 如 果 下 拉 列 表 框 中 的 选项 太 多 ， 可 以 使 用 <optgroup> 标 签 配合 label 属性 来 给 选项 分 类 ， 如 
将 代码 第 15 一 25 行 的 代码 修改 为 如 下 代码 : 


01 <select name=" 上 海 "> 
02 <optgroup label="Team1"> // 给 选项 分 组 
03 <option> 黄 浦 区 </option> 
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04 <option> 虹 口 区 </option> 
05 <option> 静 安 区 </option> 
06 <option> 长 宁 区 </option> 
07 </optgroup> /| 给 选项 分 组 
08 <optgroup label="Team2"> 
09 <option> 杨 浦 区 </option> 
10 <option> 宝 山区 </option> 
11 <option> 浦 东 新 区 </option> 
12 <option> 徐 汇 区 </option> 
13 <option> 普 陀 区 </option> 
14 </optgroup> 

15 </select> 


【运行 程序 】 在 上 述 代码 的 第 2 一 7 行 、 第 8 一 14 行 ， 通 过 <optgroup> 标 签 将 下 拉 列 表 框 分 割 成 了 
两 部 分 ， 那 么 在 页 面 中 的 效果 是 如 何 呢 ? 如 图 12.11 所 示 。 


图 12.11 <optgroup> 标 签 分 组 select 对 象 的 选项 
【深入 学 习 】 此 外 ， 如 果 设 计 者 不 希望 select 对 象 以 下 拉 列 表 框 的 形式 展示 出 来 ， 有 一 种 方式 可 
以 将 目录 项 以 滚动 条 的 框 体 样式 表现 出 来 。 只 需要 在 select 标签 中 加 入 size 属性 ， 如 size="6"， 则 表示 
是 一 个 能 容纳 6 行文 字 的 文本 框 。 当 目录 项 超出 设置 的 行 数 时 , 将 出 现 滚动 条 。 所 以 ， 如 果 把 程序 12.8 
中 第 15 行 写 成 ; 


<select name=" 上 海 ” size="6"> 


那么 ， 页 面 将 变 成 图 12.12 所 示 的 样子 。 


12.12 ”select 对象 中 的 size 属性 效果 
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12.5 表单 域 集合 


如 果 一 个 页 面 中 表单 的 项 目 过 于 繁多 ， 设 计 者 可 以 通过 使 用 表单 域 将 表单 分 组 。 当 然 ， 表 单 域 未 
必 是 只 有 太 长 表单 的 情况 下 才 适 合 使 用 。 事 实 上 ， 很 多 时 候 ， 设 计 者 拿 这 样 的 方式 来 修饰 表单 部 分 。 

表单 域 的 代码 是 由 <fieldset> 标 签 和 <legend> 标 签 组 合 而 成 的 。 默 认 情 况 下 ，<fieldset> 标 签 勾画 出 
表单 域 的 框 形 ，<legend> 标 签 的 对 象 像 标题 一 样 出 现在 框 形 的 左上 角 。 代 码 看 上 去 可 能 是 这 样 的 : 


<form action="..." method="post"> 
<fieldset> 
<legend> 注 册 信 息 : </legend> 
输入 用 户 名 : <input name="name" type="text" size="20" maxlength="12"> 
<! 一 这 里 可 以 放 入 许多 样式 的 表单 --!> 
</fieldset> 
</form> 


图 12.13 表单 域 


12.6 案例 : 制作 一 个 精美 的 由 表单 构成 的 页 面 


在 前 面 的 例子 中 ， 读 者 应 该 反复 感受 到 了 表单 也 可 以 通过 CSS 样式 表 来 进行 修饰 这 样 一 个 信息 。 
是 的 ， 设 计 者 可 以 通过 样式 表 来 修改 表单 中 文本 的 样式 ， 像 框 模型 那样 修饰 表单 的 布局 。 在 本 例 中 ， 
将 使 用 更 多 的 样式 表 来 表现 一 个 综合 的 页 面 ， 来 配合 页 面 中 的 表单 ， 如 程序 12.9 页 面 使 用 样式 表 来 修 
饰 的 表单 。 

【本 节 示 例 参 考 : 资料 光盘 \ 第 12 章 \12-9 ”使 用 样式 表 修饰 表单 的 页 面 .html】 

【实例 12-9】 使 用 样式 表 修 饰 表单 的 页 面 ， 其 源码 展示 如 下 : 

程序 12.9 使 用 样式 表 修 饰 表单 的 页 面 .html 
001 <IDOCTYPE html PUBLIC "J//W3C//DTD XHTML 1.0 TransitionaEN" 
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002 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
003 <html xmlns="http://www.w3.org/1999/xhtml"> 


004 <head> 

005 <title> 使 用 样式 表 修 饰 表单 的 页 面 </title/> 

006 <style> 

007 body {background-color:white; 

008 

009 fieldset (oorden apx ese red; 设置 表单 域 集合 的 
010 padding:10px:; Ee 

011 margin-top:20px; 样式 表 

012 margin-bottom:20px; 

013 

014 legend {font-family: 微 软 雅 黑 ; 

015 font-size: 90%; 

016 letter-spacing: -1px; 

017 font-weight: bold; 

018 line-height: 1.1: 设置 表单 域 集合 标 
019 Color:#fff; 题 的 样式 表 
020 background: orange; 

021 border: 1px solid #333; 

022 padding: 2px 6px; 

023 

024 h1 {font-family: 微 软 雅 黑 ; 

025 font-size: 175%; 

026 letter-spacing: -1px; 

027 font-weight: normal; 

028 line-height: 1.1; 

029 Color:#333; 

030 

031 label {width:140px; 

032 height:32px; 

033 margin-top:3px; 

034 margin-right:2px; 

035 padding-top:11px; 

036 padding-left6px: 设置 lable 对 象 的 样式 表 ， 通 过 不 同 
037 background-color:maroon; 的 空 距 、 边 框 、 边 距 的 样式 ， 来 制 
038 float:left; 作 lable 对 象 的 样式 

039 display: block; 

040 font-family: 幼 圆 ; 

041 font-size: 115%; 

042 letter-spacing: -1px; 

043 font-weight: normal; 

044 line-height: 1.1; 

045 Color:yellow; 

046 


047 .form {margin:0; 
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048 padding:0; 

049 h 

050 #container {width:750px; 

051 margin:auto; 
052 padding:10px: 

053 

054 #top {width:680px; 

055 height:50px:; 

056 六 

057 #leftSide { width:530px; 

058 padding-top:30px; 
059 float:left; 

060 } 

061 .Clear {clear:both; 

062 } 

063 .holder {background-color-#fff; 
064 } 

065 


以 上 这 部 分 样式 表 实 现 了 两 部 分 功能 ， 
个 表单 域 页 面 中 定义 整个 页 面 的 布局 。 
re 


一 说明: 这 里 采用 leftSide 来 命名 表单 的 样式 表 ， 是 为 了 说 明 如 果 设 计 者 希望 在 表单 右 侧 放 入 
其 他 内 容 ， 可 以 通过 定义 一 个 rightSide 层 放 置 其 他 内 容 。 事 实 上 ， 在 很 多 页 面 中 都 是 这 样 做 的 。 
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/上 #container 设置 页 面 主体 在 窗口 中 的 位 置 


/#top 用 来 确定 页 面 标题 在 页 面 中 的 位 置 


/定义 了 页 面 中 整个 表单 的 位 置 


第 9 一 49 行 讲述 了 如 何 定义 表单 域 集合 的 样式 ， 以 及 在 这 


066 .div_texbox {width:347px; // 通 过 样式 表 制 作 表单 域外 部 的 样式 

067 float:right; 

068 height:35px; 

069 margin-top:3px; 

070 padding-top:5px; 

071 padding-bottom:3px; 

072 padding-left:-5px:; 

073 background-color:#E6E6E6; 

074 } 

075 .textbox {background-color:#FFFFFF; // 通 过 样式 表 制 作 表单 域内 部 的 样式 

076 background-repeat no-repeat; 

077 background-position:left; 

078 ‘width:285px; 

079 font:normal 18px 微软 雅 黑 ; 

080 color black:; 

081 padding:3px 5px 3px 19px; 1// 通 过 设置 不 同 大 小 的 空 距 来 制作 阴影 效果 
082 } 

083 textbox:focus, .textbox:hover {background-color:orange; 

084 // 通 过 伪 类 来 确定 鼠标 划 过 表单 域 的 样式 
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085 .username {background-repeat: no-repeat; 

086 background-position:left: 

087 background-color:#FFFFFF:; 

088 Width:285px; 

089 font:normal 18px 微软 雅 黑 ; 

090 color: black: 

091 padding:3px 5px 3px 19px; 

092 D 

093 .Username:focus, .username:hover {background-color:orange; 
094 } 

095 .password {background-repeat: no-repeat /设置 密码 填写 时 的 样式 
096 background-position:left: 

097 background-color:#FFFFFF; 

098 width:285px; 

099 font:normal 18px 微软 雅 黑 ; 

100 color: black; 

101 padding:3px 5px 3px 19px; 

102 } 

103 .password:focus, .password:hover {background-color:orange; 
104 } 


这 部 分 代码 中 的 样式 表 定 义 了 表单 域 是 如 何 通过 样式 表 来 改变 它 的 外 表 的 ， 以 及 当 鼠 标 划 过 表单 
域 时 将 显示 出 怎样 的 效果 。 


105 .button_div 

106 {width:287px; // 设 置 按钮 的 样式 
107 float:right; 

108 background-color:#fff; 
109 border:1px solid #ccc; 
110 text-align:right; 

111 height:35px; 

112 margin-top:3px; 

113 padding:5px 32px 3px; 
114 } 

115 .buttons {background: #e3e3db; 
116 font-size:12px; 

uk color #989070; 

118 padding: 6px 14px; 

119 border-width: 2px; 

120 border-style: solid; 

bea | border-color: #ff #d8d8d0 #d8d8d0 #fff: 
122 text-decoration: none; 

123 text-transform:uppercase:; 
124 font-weight:bold; 

125 } 

126 </style> 


2B. 
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</head> 


代码 的 第 105 一 128 行 定义 了 样式 表 中 按钮 的 样式 。 以 下 部 分 的 代码 是 页 面 的 结构 标签 : 


129 
130 
131 
132 
133 
134 
135 
136 
137 
138 
139 
140 
141 
142 
143 
144 
145 
146 
147 
148 
149 
150 
151 

152 
153 
154 
155 
156 
157 
158 
159 
160 
161 

162 
163 
164 
165 
166 
167 
168 
169 


<body> 
<div id="container"> 
<div id="top"> 
<h1> 请 填写 这 张 表格 : </h1> 
</div> 
<div id="leftSide"> 
<fieldset> 
<legend> 注 册 信 息 : </legend> 
<form action="login.php" method="POST" class="form"> 
<label for="username"> 注 册 名 : </label> 
<div class="div_texbox"> 
<input name="username'" type="text" class="username'" id="username” 


value="depp" /> 


</div> 
<label for="password"> 密 码 : </label> 
<div class="div_texbox"> 
<input name="password" type="password" class="password" 


d="password" value="password" /> 


</div> 
<div class="button_div"> 
<input name="Submit" type="button" value=" 确 定 " class="buttons" /> 
</div> 
</form> 
<div class="clear"></div> 
</fieldset> 
<hr size="1"> 
<fieldset> 
<legend> 个 人 信息 : </legend> 
<form action="..." method="POST" class="form"> 
<label for="name"> 姓 名 : </label> 
<div class="div_texbox"> 
<input name="name" type="text" class="textbox" id="name" value="Depp" /> 
</div> 
<label for="address"> 地 址 : </label> 
<div class="div_texbox"> 
<input name="address" type="text" class="textbox" id="address" value="G 1128" /> 
</div> 
<label for="city"> 所 属 区 : </label> 
<div class="div_texbox"> 
<input name="city" type="text" class="textbox" id="city" value=" 浦 东 新 区 " /> 
</div> 
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170 <label for="country"> 城 市 : </label> 


171 <div class="div_texbox"> 
M72 <input name="country" type="text" class="textbox" id="country" value=" 上 海 " /> 
173 </div> 
174 <div class="button_div"> 
175 <input name="Submit" type="button" value=" 确 定 " class="buttons" /> 
176 </div> 
177 </form> 
178 </fieldset> 
179 </div> 
180 -</div> 
181 </body> 
【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 12.14 所 示 。 
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请 填写 这 张 表格 


图 12.14 ”使 用 样式 表 修饰 表单 的 页 面 
【深入 学 习 】 这 个 页 面 中 使 用 了 20 个 样式 表 ， 如 果 一 步 一 步 地 去 分 析 ， 它 没有 看 上 去 那么 可 怕 。 
body、fieldset、legend、hl 和 label 样式 表 ， 基 于 框 模型 的 结构 ， 定 义 了 各 自 对 象 的 字体 的 样式 。.form、 
#container、#top 和 如 eftside 这 4 个 样式 表 规 划 了 页 面 的 整体 布局 。#container 样式 表 定位 了 整个 页 面 的 
大 小 ， 而 #top 针对 于 页 面 的 标题 部 分 ， 胡 eftside 样式 表 则 定义 了 表单 部 分 的 位 置 。 

.div_textbox 定义 了 表单 中 文本 域 的 样式 ， 在 例子 中 可 以 视 为 表单 填写 文本 部 分 的 外 框 。 而 .textbox 
样式 表 定 义 了 这 个 对 象 的 内 框 。 由 于 对 padding 属性 设置 了 不 同 的 值 ， 而 制作 出 了 内 堪 的 阴影 效果 。 类 
似 的 作用 还 有 .button_div 和 .buttons 的 配合 使 用 ， 它 们 配合 的 作用 也 是 制作 出 按钮 的 内 外 边框 的 样式 ， 
来 制造 出 按钮 的 立体 效果 。 


Le 注意 : .textbox 和 .buttons 样式 表 在 HTML 源码 中 的 位 置 。 
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代码 中 第 93 和 第 94 行 ， 以 及 第 103 和 104 行 ， 分 别 使 用 了 伪 类 来 定义 当 鼠 标 放 在 文本 框 中 和 当 
鼠标 滑 过 文本 框 时 的 状态 。 


12.7 人 小 人 学 


本 章 介绍 了 表单 的 作用 以 及 表单 的 表现 形式 ， 主 要 的 知识 点 有 : 

口 表单 的 工作 原理 。 

口 ” 如 何 创建 表单 。 

口 表单 主要 的 样式 以 及 它们 的 作用 ， 通 过 这 些 表 单 ， 可 以 将 使 用 者 的 信息 递交 给 数据 管理 者 。 

根据 递交 数据 的 样式 不 同 ， 来 决定 使 用 怎样 的 表单 。 

口 了 解 表单 中 表单 域 的 意义 ， 它 是 用 来 给 用 户 输入 信息 的 区 域 。 

在 第 13 章 中 ， 将 介绍 JavaScript 的 入 门 知识 ， 即 JavaScript 的 基本 语法 。 这 是 令 你 制作 页 面 的 水 
平 真正 走向 高 手 的 路 径 。 
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第 13 章 在 网 页 中 加 入 和 神奇 的 效果 


在 学 习 完 HTML 和 CSS 之 后 ， 设 计 者 可 以 制作 出 一 些 精 美的 网 页 。 但 优秀 的 网 站 ， 绝 不 仅仅 只 是 
要 求 页 面 美观 ， 或 者 说 ， 无 法 互动 的 网 页 始终 无 法 满足 所 有 浏览 用 户 的 要 求 。 为 了 让 网 页 能 有 动态 的 
变化 ， 使 得 用 户 可 以 与 网 页 进行 交互 ， 正 提供 了 Dynamic HTML 技术 ,简称 为 DHTML。DHTML 主 
要 由 3 个 部 分 组 成 ， 分 别 为 HTML 网 页 标记 、Script 语言 与 CSS。 最 常用 的 脚本 语言 是 JavaScript。 对 
于 追求 更 高 页 面 效果 的 设计 者 来 说 ，JavaScript 是 其 在 网 页 设计 世界 中 立足 的 “ 利 剑 ”。 本 章 主要 的 知 
识 点 如 下 。 

口 脚本 语言 的 概念 、 常 用 的 两 种 脚本 语言 介绍 。 

口 区 别 JavaScript 和 Java。 

口 JavaScript 基本 语法 ， 包 括 标识 符 、 基 本 数据 类 型 、 运 算 符 、 表 达 式 、 流 程控 制 ， 以 及 函数 。 

口 通过 一 个 案例 来 展示 JavaScript 基本 语法 的 用 法 。 


脚本 语言 是 一 种 解释 性 语言 ， 不 需要 编译 ， 一 般 用 来 编写 嵌入 在 网 页 中 的 程序 ， 由 浏览 器 来 负责 
解释 执行 。 浏 览 器 一 般 都 由 相对 应 的 脚本 引擎 来 解释 执行 ， 所 以 ， 支 持 脚 本 程序 的 浏览 器 需要 集成 用 
于 解释 脚本 程序 的 模块 。 事 实 上 ， 对 于 这 些 并 没有 听 起 来 那么 陌生 。 参 照 第 12 章 中 的 程序 12.1， 在 
HTML 网 页 中 ， 脚 本 程序 代码 是 放 在 <script> 标 签 中 的 ， 浏 览 器 正 是 通过 该 标签 来 识别 脚本 程序 的 。 

脚本 语言 一 般 以 文本 的 形式 存在 ， 而 不 像 C、C++ 那 样 可 以 编译 成 二 进 制 代码 ， 也 不 用 像 Java 那 
样 解释 生成 .class 文件 .通常 在 大 多 数 网 页 设计 中 , 开发 者 经 常 使 用 的 脚本 语言 有 VBScript(Visual Basic 
Script) 、JavaScript 和 ActionScript 等 。 目 前 最 常用 的 两 种 脚本 语言 是 VBScript 和 JavaScript。 


13.1.1 初 识 VBScript 


VBScript 是 基于 微软 Microsoft 公司 的 Visual Basic。 其 广泛 应 用 于 网 页 和 ASP 程序 制作 ， 因 为 其 
与 Visual Basic 的 紧密 联系 ， 所 以 对 于 拥有 Visual Basic 开发 经 验 的 程序 员 来 说 ， 很 容易 入 门 。 现 在 通 
过 一 个 简单 的 示例 来 体验 它 的 效果 ， 如 程序 13.1 所 示 为 一 个 简单 的 VBScript 示例 。 
【本 节 示 例 参考 :资料 光盘 \ 第 13 章 \13-1 _ VBScript 简单 示例 .html】 
【实例 13-1】VBScript 简单 示例 ， 其 源码 展示 如 下 : 
程序 13.1 VBScript 简 单 示例 .html 


01 <html> 
02 <head> 


第 13 章 ， 在 网 页 中 加 入 神 坷 而 开瑞 


03 <title>VBScript 简单 使 用 </title> 

04 <script language="VBScript"> 

05 <|- 

06 Sub Button1_OnClick 

07 MsgBox "Hello! 这 是 VBScript 代码 产生 的 效果 " 
08 End Sub 

09 一 > 

10 </script> 

11 </head> 

12 <body> 

13 <h3>VBScript 简单 使 用 </h3><HR> 

14 <form> 

15 <input name="Button1" type="BUTTON" value=" 显 示 VBScript"> 
16 </form> 

17 </body> 

18 </html> 


注意 ; 浏览 器 是 通过 language="VBScript" 来 知道 执行 的 脚本 语言 是 VBScript 的。 


将 上 面 的 代码 粘贴 到 vbscript.html 文件 的 源 代码 中 ， 单 击 浏览 器 中 的 “刷新 ”按钮 ， 运 行 结果 如 
图 13.1 所 示 。 之 后 再 次 单 击 “显示 VBScript 效果 ”按钮 ， 显 示 结 果 如 图 13.2 所 示 。 
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13.1 一 个 VBScript 编写 的 简单 页 面 13.2 单 击 “ 显 示 VBScript 效果 ”按钮 的 显示 结果 
在 单 击 “显示 VBScript 效果 ”按钮 后 ， 会 出 现 一 个 对 话 框 ， 这 个 对 话 框 就 是 用 VBScript 实现 的 ， 
即 程序 13.1 中 的 第 4 一 10 行 的 代码 。 
13.1.2 学习 JavaScript 的 起 步 


JavaScript 是 Netscape 公司 借鉴 Sun 公司 的 Java 的 相关 概念 , 将 其 自身 的 Livescript 进行 重新 设计 
之 后 推出 的 。 因 此 ，JavaScript 的 很 多 语法 都 与 Ct++、Java 的 风格 非常 相似 。 学 习 过 这 些 编程 语言 将 有 
助 于 学 习 JavaScript。 与 C++、jJava 等 编程 语言 类 似 ,在 JavaScript 中 也 包含 类 、 对 象 、 变 量 、 函 数 等 ， 
而 且 使 用 的 流程 控制 也 基本 相似 。 不 同 之 处 在 于 JavaScript 的 语法 规则 更 松散 , 不 像 编程 语言 那么 复杂 。 
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例如 ,对 于 变量 的 定义 ,在 JavaScript 中 只 需 通 过 var 定义 即 可 ， 而 不 必 像 编 程 语 言 中 定义 其 为 int 
或 char。 此外， 由 于 JavaScript 代码 不 会 被 编译 为 二 进 制 代码 文件 ， 只 是 作为 一 种 网 页 文件 〈 在 本 书 中 
指 HTML 文件 ) 的 一 部 分 由 浏览 器 解释 执行 。 因 此 ， 修 改 起 来 也 要 比 编程 语言 在 集成 平台 中 方便 。 所 
以 JavaScript 是 一 种 简单 易学 的 语言 , 但 又 是 一 种 具有 强大 特效 功能 的 语言 。 同 样 , 现在 通过 一 个 简单 
的 示例 来 初步 了 解 一 下 JavaScript 的 魅力 ， 如 程序 13.2 展示 的 是 和 程序 13.1 同样 效果 的 页 面 。 不 同 的 


是 这 里 使 用 的 脚本 语言 是 JavaScript 语言 。 


【本 节 示 例 参考 ， 资 料 光 盘 \ 第 13 章 \13-2 ”JavaScript 简单 示例 .html】 
【实例 13-2】JavaScript 简单 示例 ， 其 源码 展示 如 下 : 


程序 13.2 ”JavaScript 简 单 示 例 .html 


01 <html> 

02 <head> 

03 <title>JavaScript 简单 使 用 </title> 

04 <script language="JavaScript"> 

05 function button1() 

06 

07 alert("Hello! 这 是 JavaScript 的 显示 效果 "); 
08 } 

09 </script> 

10 </head> 

11 <body> 

jz <center> 

9 <h3>JavaScript 简单 使 用 </h3><HR> 

14 </center> 

15 <form> 

16 <input name="Button1" type="BUTTON" value=" 显 示 JavaScript 效果 " 
Whe onclick="button1()"> 

18 </form> 

19 </body> 

20 </html> 
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注意 : 浏览 器 是 通过 language="JavaScript" 来 知道 执行 的 脚本 语言 是 JavaScript。 


【运行 程序 】 将 上 面 的 代码 直接 粘贴 在 javascript.html 文件 的 源 代码 中 ， 单 击 “ 刷 新 ”按钮 ， 运 行 
结果 如 图 13.3 所 示 。 再 次 单 击 “ 显 示 JavaScript 效果 ”按钮 ， 运 行 结果 如 图 13.4 所 示 。 
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~ 说 明 : 读者 可 能 暂时 不 理解 JavaScript 的 部 分 代码 ， 在 后 续 的 章节 中 将 会 详细 讲解 如 何 使 


用 JevaScript 设计 漂亮 的 网 页 。 
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13.3 一 个 JavaScript 编写 的 简单 页 面 图 13.4 单 击 “ 显 示 JavaScript 效 果 ” 按 钮 的 显示 结果 


【深入 学 习 】 可 以 看 到 , 用 JavaScript 同样 实现 了 上 面 VBScript 例子 的 功能 。 单 击 “ 显示 JavaScript 
效果 ”按钮 之 后 , 同样 出 现 一 个 对 话 框 , 而 此 处 是 使 用 程序 13.2 中 第 4 一 9 行 的 JavaScript 代码 实现 的 。 
另外 ， 在 使 用 button 按钮 时 需要 通过 onclick 指明 调用 的 函数 ， 如 程序 13.2 中 的 第 17 行 代码 所 示 。 

正 是 由 于 JavaScript 与 C++、Java 等 编程 语言 的 相似 性 ， 且 易 阅 读 、 易 掌握 ， 所 以 大 部 分 网 页 设计 
者 偏爱 使 用 JavaScript。 对 于 初学 者 来 说 ， 学 习 一 种 编程 技术 时 跟随 趋势 是 一 条 很 不 错 的 捷径 ， 往 往 可 
以 事半功倍 。 因 为 JavaScript 的 发 展 已 比较 成 熟 ， 供 初学 者 参考 的 范例 和 可 借鉴 的 经 验 也 较 多 ,这 样 就 
可 以 大 大 减少 在 学 习 中 可 能 出 现 的 问题 。 本 书 主 要 介绍 的 是 JavaScript。 


13.2 JavaScript 和 Java 的 区 别 


在 13.1 节 中 提 到 ，JavaScript 与 目前 盛行 的 编程 语言 Java 比较 相似 ， 然 而 对 于 学 习 者 来 说 ， 需 要 
明确 JavaScript 与 Java 是 不 一 样 的 ， 有 很 多 初学 者 不 明白 这 两 者 的 区 别 。 事实 上 ， 它 们 并 不 像 字面 看 
上 去 那样 联系 紧密 ，JavaScript 并 不 是 Java 的 子 集 ， 而 是 有 很 大 的 区 别 ， 不 理解 这 点 可 能 会 掉 入 混 为 一 
谈 的 误区 。 在 日 常 工作 、 学 习 中 不 乏 将 两 者 混淆 的 例子 ， 经 常 有 编程 者 把 Java 中 出 现 的 问题 提交 到 
JavaScript 的 学 习 交 流 社区 ， 或 者 将 JavaScript 的 难题 求助 于 Java 学 习 社 区 。 

JavaScript 和 Java 是 分 别 来 自 两 个 不 同 公司 的 产品 ， 这 很 显然 地 决定 了 两 者 有 很 大 的 差异 。Java 
是 SUN 公司 推出 的 一 种 面向 对 象 的 程序 设计 语言 ， 非 常 适合 于 Internet 应 用 程序 的 开发 。 而 JavaScript 
是 Netscape 公司 为 了 扩展 Netscape Navigator 功能 而 开发 的 产品 , 是 一 种 基于 对 象 和 事件 驱动 的 解释 性 
语言 ， 通 常 嵌 入 在 Web 页 面 中 。 

JavaScript 借鉴 了 Java 的 相关 概念 ， 所 以 两 者 在 语法 上 有 很 多 相似 之 处 ， 只 是 不 完全 相同 。 例 如 ， 
其 各 自 所 使 用 的 变量 是 不 一 样 的 。JavaScript 是 弱 类 型 变量 声明 ， 即 没有 非常 严格 的 类 型 声明 要 求 ， 在 
定义 时 只 需要 使 用 var 定义 即 可 。 在 运行 时 由 解释 器 检查 其 数据 类 型 〈 即 动态 联 编 ) ， 而 Java 采用 强 
类 型 变量 检查 ， 所 有 变量 在 使 用 前 必须 声明 数据 类 型 〈( 即 静态 联 编 ) 。 

此 外 ， 两 者 在 嵌入 方式 上 也 不 一 样 ，Java 通过 <applet> 标 签 来 标识 ， 是 一 种 与 HTML 无 关 的 格式 。 
其 代码 以 字 节 代码 的 形式 保存 在 独立 的 文档 中 ， 必 须 通 过 HTML 引用 装载 。 而 JavaScript 是 以 文本 的 
形式 存在 ， 可 以 直接 放 在 <script> 标 签 之 间 。 

当 明 白 了 JavaScript 与 java 的 区 别 之 后 ， 对 于 有 Java 开发 经 验 的 读者 来 说 ， 可 以 避免 将 Java 中 的 
惯性 带 入 到 JavaScript 中 。 而 对 于 页 面 开发 的 初学 者 来 说 ， 也 不 用 惯 怕 所 谓 Java 名 头 的 来 势 测 油 。 
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13.3 JavaScript 的 基本 语法 


前 面 介绍 了 什么 是 JavaScript， 以 及 JavaScript 的 特点 ,并且 通过 一 个 简单 的 JavaScript 示例 实现 了 
单 击 按钮 弹出 对 话 框 的 功能 。 对 比 之 前 讲 过 的 HTML, 设计 者 可 以 初步 体验 到 JavaScript 与 用 户 互动 的 
特效 功能 。 然 而 这 个 示例 只 是 冰山 一 角 ， 还 不 足以 完全 展现 JavaScript 的 魅力 。 从 本 节 开始 将 详细 地 学 
习 JavaScript， 像 其 他 编程 语言 一 样 ， 需 要 先 从 基本 的 语法 开始 。 


13.3.1 ”JavaScript 中 的 标识 符 和 保留 关键 字 


也 许 有 C、C++ 或 者 Java 编程 经 验 的 人 对 标识 符 这 个 概念 已 经 不 陌生 了 , 而 JavaScript 中 的 标识 符 
与 其 他 编程 语言 中 的 概念 基本 一 样 ， 是 指 JavaScript 中 定义 的 符号 ， 必 须 以 字母 、 下 划 线 (_) 或 美元 
符号 ($) 开始 。 其 他 字符 可 以 是 字母 、 数 字 、 下 划 线 或 美元 符号 ， 如 变量 名 、 函 数 名 等 。 但 是 ， 标 识 
符 不 能 是 JavaScript 中 的 保留 关键 字 且 不 能 包含 空格 。 

例如 ， 下 面 都 是 定义 “电话 号 码 ” 的 合法 标识 符 。 

telephoneNum 

telephone_Num 

_telephoneNum 

S$telephoneNum 

tl 

JavaScript 的 标识 符 对 大 小 写 敏感 ，telephoneNum 和 telephonenum 是 两 个 不 同 的 标识 符 , 这 是 在 编 
写 代码 过 程 中 很 容易 出 现 的 疏忽 。 此 外 ， 在 实际 定义 标识 符 时 可 根据 大 多 数 人 的 习惯 来 定义 ， 一 般 用 
第 一 种 定义 方法 ， 如 telephoneNum。 利 用 名 字 组 合 可 以 望 文 生 义 ， 便 于 理解 ， 如 果 定 义 成 t， 则 别人 
就 很 难 理解 了 。 名 字 组 合 时 第 一 个 单词 首 字 符 小 写 ， 后 边 的 单词 首 字母 均 大 写 ， 这 样 做 既 使 于 阅读 ， 
又 使 于 输入 。 注 意 ， 下 面 都 是 非法 标识 符 : 


This this 是 JavaScript 中 的 保留 关键 字 

2008_Olympic 标识 符 不 能 以 数字 开头 

2008.08 标识 符 中 不 能 含有 点 (.) 

One World 标识 符 中 不 能 含有 空格 

使 用 者 在 编写 时 为 了 避免 使 用 保留 关键 字 来 定义 标识 符 ， 可 以 参考 表 13.1 中 总 结 的 JavaScript 保 
留 关键 字 。 


说 明 : 除了 表 13.1 中 的 保留 关键 字 ， 在 定义 标识 符 时 还 要 避免 那些 已 经 用 作 JavaScript 的 
内 部 对 象 或 函数 的 名 称 的 词 ， 如 string 或 alert 等 单词 。 当 在 运行 时 提示 标识 符 错误 ， 如 果 不 在 上 边 介绍 
的 非法 字符 之 列 ， 不 妨 检查 一 下 是 否 用 了 已 定义 好 的 内 部 对 象 或 函数 的 名 称 。 
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表 13.1 JavaScript 保 留 关键 字 


abstract boolean Break 
byte Case Catch 
char Class Const 
continue default Do 
double else extends 
false finally Float 
for function Goto 
in instanceof Int 
if implements import 
interface long Native 
new null package 
private protected Public 
return short Static 
Super Switch Synchronized 
this throw, throws 
transient true h 
Var While 
with 


13.3.2 ” JavaScript 语法 的 特殊 规则 


JavaScript 对 大 小 写 非 常 敏感 ， 在 程序 中 定义 xman 和 Xman 是 不 同 的 ， 这 是 两 个 变量 。 前 面 已 经 
提 过 ， 在 此 处 不 厌 其 烦 地 再 提 是 因为 这 是 一 个 初学 者 犯错 率 很 高 的 知识 点 。HTML 是 对 大 小 写 不 敏感 
的 ，xman 和 Xman 是 一 样 的 。 将 JavaScript 嵌入 在 HTML 中 很 容易 混淆 ， 要 保持 高 度 的 警惕 性 。 

- 般 情 况 下，JavaScript 每 条 执行 语句 的 后 面 都 要 以 分 号 〈;) 来 结束 。 但 是 当 JavaScript 的 代码 作 
为 属性 值 时 ， 最 后 一 句 后面 的 分 号 可 以 省 略 ， 例 如 : 
action="javascript:checkDay()" // 省 略 了 最 后 的 分 号 


注意 英文 标点 符号 和 中 文 标 点 符号 的 区 别 , 在 JavaScript 中 用 的 都 是 英文 标点 符号 , 不 只 是 初学 者 ， 
就 是 身 经 百 战 的 开发 者 ， 有 时 也 会 因为 马虎 将 “,” 写 成 “，”， 将 “;” 写 成 “;”。 这 也 是 在 调试 程 
序 时 应 该 注重 查找 的 地 方 。 


全 注意 : 在 JavaScript 中 ，“//” 表 示 注 释 一 行 代码 ， 注 释 多 行 代码 时 使 用 “/*” 开 头 ， 以 “*/” 
结尾 。 另 外 ，“/* */” 中 可 以 谋 套 “//”， 但 不 能 嵌 套 “/* */”， 因 为 第 一 个 “/*” 会 与 其 后 面 第 一 次 出 现 
的 “*/” 配 对 ， 例 如 : 

<script language="javascript"> 
e // 第 一 个 注释 符 

下面 的 代码 会 弹出 一 个 警告 框 */ // 第 二 个 注释 符 

警告 框 中 的 内 容 是 “好 运 2008! ” 
上 
alert(" 好 运 2008"); 
</script> 


Ey a 


“227 


CSS magitis 


上 面 代 码 中 第 一 次 出 现 的 “六 ”会 与 第 一 个 “上 #” 配 对 ， 导 致 警告 框 中 的 内 容 “好 运 2008! ” 没 
有 被 注释 掉 ， 所 以 JavaScript 无 法 解释 这 个 字符 串 ， 打 开 页 面 时 就 会 出 现 错误 。 


13.4 ”JavaScript 的 数据 类 型 


JavaScript 数据 类 型 包括 基本 数据 类 型 和 内 置 数据 类 型 。 基 本 数据 类 型 一 般 包括 整 型 、 实 型 、 字 符 
串 型 、 布 尔 型 和 空 值 5 种 。 基 本 数据 类 型 定义 的 数据 可 以 是 常量 ， 也 可 以 是 变量 。JavaScript 的 常量 又 
称 为 字面 常量 ， 其 值 不 能 随便 改变 。 变 量 是 程序 向 系统 申请 的 内 存单 元 ， 用 来 存储 各 种 类 型 的 数据 。 


13.4.1 常量 


与 基本 数据 类 型 相对 应 ， 常 量 一 般 分 为 5 种 ， 分 别 是 整 型 常量 、 实 型 常量 、 布 尔 型 常量 、 字 符 型 
常量 和 空 值 。 在 编写 JavaScript 程序 时 ， 常 量 数据 类 型 是 应 用 广泛 、 常 见 的 一 种 类 型 。 常 量 通常 类 似 于 
可 以 看 得 到 、 能 想象 出 来 的 元 素 。 

口 整 型 常量 : 一 般 来 说 ， 整 型 常量 可 以 采用 十 进 制 、 八 进 制 和 十 六 进 制 来 表示 。 十 进 制 的 首位 不 

能 是 数字 0， 如 2008。 八 进 制 以 0 为 首位 ， 如 0351。 十 六 进 制 以 0x 或 oX 开头 ， 如 0x86 或 
oX86。 这 3 种 进 制 是 可 以 相互 转化 的 。 
口 ” 实 型 常量 : 可 以 采用 整数 部 分 加 小 数 部 分 的 形式 来 表示 的 值 ， 也 可 以 采用 科学 计数 法 来 表示 ， 
如 实数 1000.00 用 科学 计算 法 表示 是 1E3 或 le3。 

口 布尔 型 常量 ， 有 两 个 值 rue 和 false。 通 常 在 流程 控制 中 作为 判断 条 件 。 

口 字符 型 常量 : 是 用 单 引号 () 或 双 引 号 (") 引起 来 的 零 个 、 一 个 或 几 个 字符 , 如 "One World One 
Dream"、"a"、""。"" 表 示 一 个 空 字 符 串 。 


注意 : 同 Java 语言 一 样 ，JavaScript 中 以 反 斜 杠 (\) 作为 转 义 字符 来 表示 一 些 特殊 字符 ， 
如 \、\n 等 。\\ 表 示 斜 杠 ，\n 表示 换行 。 


口 空 值 : 即 表示 什么 也 没有 ， 当 引用 没有 定义 的 变量 时 ， 就 返回 一 个 null 值 。 


13.4.2 变量 


变量 并 非 是 指 一 个 变换 不 定 的 元 素 ， 变 量 相当 于 设置 好 一 个 位 置 或 一 个 符号 ， 所 以 使 用 者 可 以 将 
不 同 的 元 素 定义 为 这 个 位 置 或 符号 。 这 就 是 变量 的 含义 。JavaScript 中 采用 弱 类 型 的 变量 形式 ， 即 声明 
一 个 变量 时 不 必 指 明 其 为 整 型 还 是 字符 型 ， 而 是 使 用 关键 字 var 声明 ， 例 如 : 

var telephoneNum; 


这 条 语句 定义 了 一 个 变量 ， 即 申请 了 内 存 。 但 还 没有 值 ， 可 以 在 使 用 时 为 其 赋值 ， 如 将 一 个 数值 
赋 给 这 个 变量 。 


telephoneNum=62286688; 
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也 可 以 在 变量 声明 时 就 为 其 赋值 ， 例 如 : 

var telephoneNum=62286688; 

上 面 的 定义 方法 与 其 他 编程 语言 中 的 定义 方法 是 一 样 的 。JavaScript 的 特殊 之 处 在 于 可 以 不 事先 声 
明 变 量 而 直接 使 用 。 浏 览 器 在 解释 执行 到 该 语句 时 ， 会 自动 产生 一 个 相应 类 型 的 变量 ， 例 如 : 

school="BUPT"; 

浏览 器 在 解释 执行 上 面 的 语句 时 就 会 自动 产生 一 个 字符 串 型 变量 。 比 较 好 的 方法 是 偏向 于 事先 声 
明 变量 , 这 样 做 的 好 处 是 能 及 时 发 现代 码 中 的 错误 。 因 为 JavaScript 是 采用 动态 编译 的 ， 而 动态 编译 不 
易 发 现代 码 中 的 错误 ， 特 别 是 变量 命名 的 方面 。 
13.4.3 ”数据 类 型 转换 

在 数据 类 型 的 使 用 过 程 中 ， 经 常会 出 现 返回 值 并 不 是 要 求 的 数据 类 型 的 情况 ， 这 就 需要 在 不 同 数 
据 类 型 之 问 进行 转换 。jJavaScript 中 数据 类 型 的 转换 方法 有 两 种 : 一 是 将 整个 值 从 一 种 类 型 转换 为 男 一 
种 数据 类 型 ， 二 是 从 一 个 值 提取 另 一 种 类 型 的 值 ， 并 完成 转换 工作 。 
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注意 : 13.4.4 小 节 要 讲 的 表达 式 运 算 中 也 需要 统一 数据 类 型 。 


1. 一 种 数据 类 型 转换 为 另 一 种 数据 类 型 


这 种 情况 有 3 种 转换 方法 ， 分 别 是 String0、Number0 和 Boolean() 方 法 。 
口 String( 方 法 : 表示 将 任意 一 种 数据 类 型 转换 为 字符 型 。 例 如 
String(2008); 

其 转换 结果 为 "2008"。 

口 Number0 方 法 : 将 任意 一 种 数据 类 型 转换 为 数值 型 。 例 如 : 
Number("2008"); 


其 转换 结果 为 2008。 
口 “Boolean( 方 法 : 将 任意 一 种 数据 类 型 转换 为 布尔 型 。 例 如 : 
Boolean("aaa"); 

其 转换 结果 为 true。 


2. 从 一 个 值 提取 另 一 种 类 型 的 值 ， 并 完成 转换 工作 

这 种 情况 也 有 3 种 转换 方法 ， 分 别 是 parseInt0 、parseFloat() 和 eval()。 
口 “parseInt0: 表示 提取 字符 串 中 的 整数 。 例 如 : 
parselnt("2008Olympic "); 

其 转换 结果 为 2008。 

口 ”parseFloat0: 表示 提取 字符 串 中 的 浮 点 数 。 例 如 : 
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parseFloat("2008.08Olympic"); 

其 转换 结果 为 2008.08。 

口 eval0: 表示 执行 用 字符 串 表 示 的 一 段 JavaScript 代码 。 例 如 : 
nextOlympic=eval("2008+4"); 

其 转换 结果 为 nextOlympic=2012。 


13.4.4 运算 符 


JavaScript 是 用 来 处 理 对象 运 算 的 符号 ， 是 具有 全 范围 的 运算 符 。 按 照 处 理 对 象 的 数目 分 为 单元 运 
算 符 、 二 元 运算 符 和 三 元 运算 符 。 更 常见 的 分 类 方法 是 按照 功能 分 为 算术 运算 符 、 赋 值 运算 符 、 比 较 
运算 符 、 罗 辑 运 算 符 和 位 运算 符 。 

1. 算术 运算 符 

JavaScript 中 常用 的 算术 运算 符 如 表 13.2 所 示 。 

表 13.2 算术 运算 符 


注意 : 当 表 达 式 中 至 少 有 一 个 字符 串 时 ，“+” 表 示 多 个 字符 串 的 连接 ， 如 "Olympic"+2008 
的 结果 是 "Olympic2008"。 


2. 赋值 运算 符 
赋值 运算 符 是 将 其 右边 的 一 个 值 或 者 表达 式 的 值 赋 给 其 左边 的 变量 。 常 用 的 赋值 运算 符 如 表 13.3 
所 示 。 
表 13.3 ”常用 的 赋值 运算 符 


运 算 符 运算 符 说 明 示例 
二 + 将 变量 值 加 1 后 再 将 结果 赋 给 这 个 变量 +441 1++ 
= = 
++ 有 两 种 用 法 : ++y 和 y++。 前 者 是 变量 先 将 自己 加 1， 再 参与 其 他 运算 ， 而 后 者 是 变量 在 参与 其 
他 运算 后 ， 再 将 自己 加 1。 一 与 ++ 用 法 一 样 。 
3. 比较 运算 符 
比较 运算 符 用 在 逻辑 语句 中 ， 比 较 两 边 的 操作 数 ， 返 回 一 个 布尔 值 ， 结 果 为 真 时 返回 true， 结 果 
为 假 时 返回 false。 常 用 的 比较 运算 符 如 表 13.4 所 示 。 
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表 13.4 常用 的 比较 运算 符 


运 算 符 运算 符 说 明 示 例 
> | 当 左 边 操作 数 大 于 右边 操作 数 时 返回 true， 否 则 返回 false 。 ”| 4>3 返 回 true，5>6 返 回 false 
< | 当 左边 操作 数 小 于 右边 操作 数 时 返回 true， 和 否则 返回 false 。 | 4<5 返 回 true，5<1 返 回 false 
>= | 当 左边 操作 数 大 于 等 于 右边 操作 数 时 返回 true, 否则 返回 false | 4>=4 返 回 true，4>=5 返 回 false 
<= | 当 左 边 操作 数 小 于 等 于 右边 操作 数 时 返回 true, 否则 返回 false | 4<=4 返 回 true，4<=1 返 回 false 
== | 当 左 边 操作 数 等 于 右边 操作 数 时 返回 true， 否 则 返回 false 。 ”| 5==5 返 回 true，5==6 返 回 false 


!= 当 左 边 操作 数 不 等 于 右边 操作 数 时 返回 true， 否 则 返回 false | 5!=8 返 回 true，5!=5 返 回 false 


4. 逻辑 运算 符 
风 辑 运算 符 用 于 测定 变量 和 值 之 间 的 逻辑 ， 采 用 布尔 值 true 或 false 作为 操作 数 ， 其 返回 值 也 是 风 
辑 值 。 常 用 的 逻辑 运算 符 如 表 13.5 所 示 ， 假 定 x=8 且 y=5。 
表 13.5 ”常用 的 逻辑 运算 符 


运算 符 说 明 
当 左右 两 边 操作 数 均 为 true 时 返回 true， 否 则 返回 false 
当 左 右 两 边 操作 数 至 少 有 一 个 为 true 时 返回 true， 否 则 返 


当 操 作 数 为 true 时 返回 false， 和 否则 返回 true !(x<10) 返 回 false 


5. 位 运算 符 

位 运算 符 包括 位 逻辑 运算 符 和 位 移动 运算 符 。 位 逻辑 运算 符 有 3 种 ， 即 &、|、^。 位 移动 运算 符 有 
3 种 ， 即 >>、<<、>>>。 位 运算 符 在 编写 JavaScript 程序 时 不 太 常用 ， 此 处 不 做 详细 介绍 ， 需 要 时 可 参 
考 相关 手册 。 


13.4.5 ”表达 式 


在 学 习 完 变 量 和 运算 符 之 后 ， 表 达 式 的 概念 就 很 容易 理解 了 ， 其 实在 前 面 已 经 多 次 见 到 简单 的 表 
达 式 。 表 达 式 是 变量 、 常 量 及 运算 符 的 集合 。 一 般 分 为 算术 表达 式 、 字 符 串 表达 式 、 赋 值 表达 式 ， 以 


表达 式 的 种 类 是 多 种 多 样 的 ， 当 表达 式 中 包含 多 个 运算 符 时 ， 运 算 符 的 优先 级 就 显得 非常 重要 了 。 
如 表 13.6 所 示 为 按 优 先 级 从 高 到 低 列 出 的 JavaScript 运算 符 ， 具 有 相同 优先 级 的 运算 符 按 从 左 至 右 的 
顺序 求 值 。 


表 13.6 JavaScript 运算 符 优先 级 


优 先 级 运 算 符 
1 。[] () 
2 | 
3 */% 
4 + 一 + 《字符 串 链接 ) 
5 << >> >>> 
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续 表 
优 先 级 运 算 符 
6 <<=>>= 
7 &( 按 位 与 )》^( 按 位 异 或 ) | ( 按 位 或 ) 
8 && (逻辑 与 ) | (逻辑 或 ) 
9 ?:〔 条 件 运 算 符 ) 
10 =《【 赋 值 运算 符 ) 
11 ,〈 多 重 求 值 
来 看 一 个 表达 式 ， 例 如 : 
y=2008*(55+6+23); 
在 该 表达 式 中 有 5 个 运算 符 ， 即 =、*、()、+、+。 按 照 表 13.6 的 优先 级 规则 从 高 到 低 应 为 0)、+、 
6 
13.5 流程 控制 
程序 并 不 都 是 按部就班 地 执行 ， 这 就 需要 控制 结构 来 大 显 神威 。 日 常生 活 中 经 常会 根据 不 同 的 情 


况 做 不 同 的 决定 。 例 如 ， 下 雨 就 呆 在 家 里 看 奥运 直播 ， 或 者 不 下 雨 就 跟 朋友 出 去 逛街 ， 不 同 条 件 下 触 
发 不 同 的 流程 结果 ， 再 如 在 工厂 中 控制 程序 控制 机 器 不 停 地 执行 组 装 汽车 零件 。 这 些 情况 的 处 理 就 离 
不 开 流程 控制 了 。JavaScript 常用 的 程序 流程 有 3 种 结构 ， 即 顺序 结构 、 选 择 结构 和 循环 结构 。 


13.5.1 顺序 结构 
顺序 结构 是 最 基本 的 控制 结构 ， 任 何 一 个 程序 都 离 不 开 ， 是 程序 按照 自 上 而 下 的 顺序 逐 行 执行 的 。 


例如 : 

Var x=2008; 

alert(x); // 弹 出 一 个 对 话 框 显示 变量 x 的 值 

此 例 就 是 典型 的 顺序 结构 ， 浏 览 器 先 初 始 化 变量 x， 并 为 其 赋值 2008。 然 后 再 执行 下 一 行 ， 弹 出 
一 个 对 话 框 来 显示 x 的 值 。 


13.5.2 ”选择 结构 


重用 的 选择 结构 有 让 结构 、if…else 结构 和 switch 结构 。 选 择 结构 即 是 像 “ 如 果 不 是 … 那 么 将 …?” 
这 样 形式 的 结构 。 
1. 让 结构 
站 结构 的 格式 写法 是 : 
if 条 件 语句 ) 
人 
语句 
bh 
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当 条 件 语句 的 返回 结果 是 true 时 则 程序 执行 大 括号 中 的 语句 ， 然 后 顺序 执行 后 面 的 其 他 程序 。 如 
果 条 件 语句 返回 false， 则 程序 不 执行 大 括号 中 的 语句 ， 而 直接 执行 后 面 的 其 他 程序 。 例 如 : 
var y=10; 
if(y>9) 
{ 
alert(y); 


| 
上 面 的 程序 中 ， 当 条 件 语句 y 值 大 于 9 时 ， 语 句 返回 值 为 ttue， 那 么 这 个 程序 将 执行 alert(y)。 


注意 : 虽然 上 面 的 入 从 句 只 有 一 条 语句 ， 但 建议 不 要 省 略 大 括号 对 。 这 样 做 易 读 、 易 维护 。 
程序 员 平时 应 养 成 良好 的 习惯 。 


2. if…else 结构 
if…else 的 格式 是 : 
说 条 件 语句 ) 

{ 


语句 1 


这 种 结构 是 当 条 件 语句 为 true 时 ， 程 序 执行 语句 1; 而 条 件 语 句 为 false 时 ,程序 执行 语句 2。 例 如: 


var y=2008; 
if(y==2008) 


{ 
alert(" 奥 运 年 "); 
上 


else 


{ 
alert(" 年 年 有 余 ); 
上 
如 果 y 的 值 等 于 2008， 则 弹出 对 话 框 显示 “奥运 年 ”; 否则 将 弹出 对 话 框 “ 年 年 有 余 ”。 另 外 ， 
让 语句 可 以 媒 套 使 用 。 
3. switch 结构 
对 于 条 件 语 句 拥有 多 个 值 时 ， 使 用 switch 语句 就 会 显得 得 心 应 手 。 其 语句 的 格式 是 : 
Switch( 表 达 式 ) 
{ 
case 取 值 1 
语句 1 
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break; 
case 取 值 2: 
语句 2 
break: 
case 取 值 3: 
语句 3 
break; 


case 取 值 n: 
语句 n 
break; 
default: 
语句 n+1 
break; 
| 
程序 根据 switch 表达 式 的 结果 来 与 case 后 面 的 值 进行 匹配 。 如 果 与 n 匹配 ， 则 执行 语句 n， 直 到 
人 磁 到 break 语句 为 止 。default 语句 是 可 选 的 ， 只 有 上 面 的 值 都 不 匹配 时 ， 才 执行 语句 n+1。 例 如 : 


switch(month) 
{ 
case February: 
alert("28 天 "); 
break; 
case April: 
case June: 
case September: 
case November: 
alert("30 天 "); 
break; 
default: 
alert("31 天 "); 
break; 


} 
此 例 中 如 果 月 份 (month) 等 于 February, 则 弹出 对 话 框 显示 “28 天 ”; 如 果 是 April、 June、September 
或 者 November 中 的 任意 一 个 ， 则 弹出 对 话 框 显示 “30 天 ”; 其 他 月 份 弹出 对 话 框 显示 “31 天 ”。 


人 


为 了 完全 理解 上 面 的 代码 ， 此 处 需要 说 明 一 下 break 语句 的 用 法 。break 语句 可 以 终止 循环 体 中 的 
执行 语句 和 switch 语句 。 一 般 来 说 ， 循 环 条 件 为 false 时 循环 才 结 束 。 如 果 提 前 中 断 循环 ， 可 以 在 循环 
体 语 句 中 添加 break 语句 。 除 了 break， 还 有 continue 语句 来 中 断 循 环 ， 不 过 continue 只 是 跳 过 本 次 循 
环 要 执行 的 剩余 语句 ， 继 续 执行 下 一 次 循环 。 要 注意 break 和 continue 的 区 别 。 


注意 : month 的 值 只 能 是 整 型 或 者 字符 串 ， 不 能 是 实 型 。 
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13.5.3 ”循环 结构 


循环 结构 一 般 有 while 结构 、do…while 结构 和 for 结构 。 它 们 都 是 表示 一 个 动作 完成 之 后 继续 重 
复 上 一 个 动作 。 

1，while 结构 

该 结构 的 格式 是 : 

while( 条 件 表达 式 ) 

i 

语句 

} 

当 条 件 表达 式 的 返回 值 为 true 时 ， 就 执行 大 括号 中 的 语句 。 当 条 件 表达 式 的 返回 值 为 false 时 ， 就 
跳出 循环 ， 执 行 后 面 的 语句 。 例 如 : 

var i=0; 

while(i<10) 


上 

alert(" 我 在 循环 中 "+i); 

it+; 
} 
上 述 代 码 中 ，i 从 0 增加 到 9， 每 次 都 弹出 对 话 框 ， 当 i=10 时 ， 条 件 表达 式 i<10 为 false， 则 跳出 

循环 ， 执 行 while 循环 后 面 的 代码 。 
2. do…while 结构 
do…while 的 格式 是 : 
do 
由 
语句 

}while( 条 件 表达 式 ); 
其 结构 与 while 结构 的 不 同 之 处 在 于 ，do…while 是 先 执行 大 括号 中 的 语句 ， 再 检查 条 件 表达 式 的 


值 ， 因 此 大 括号 中 的 代码 至 少 要 被 执行 一 次 。 例 如 : 
var i=0; 
do 


上 alert(" 我 在 循环 中 "+i); 
i++; 
} while(i<10) 
此 例 在 执行 时 会 弹出 11 次 对 话 框 , 可 以 与 while 结构 中 的 例子 做 一 下 对 比 , 便于 理解 两 者 的 不 同 。 
3. for 结构 
最 常用 的 循环 是 for 循环 ， 在 学 习 其 用 法 之 后 ， 可 与 其 他 循环 结构 对 比 ， 根 据 个 人 习惯 选择 使 用 哪 
种 。for 循环 语句 的 格式 是 : 
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for( 初 始 值 ;循环 条 件 ;更 新 值 ) 
{ 
语句 
} 
通过 for 循环 结构 的 用 法 ， 可 以 实现 同 while 循环 同样 的 作用 。 以 下 代码 的 效果 和 前 面 while 例子 
是 一 样 的 。 


for(var i=0;i<10;i++) 


{ 
alert(" 我 在 循环 中 "+i); 
} 


题 。 在 刚 开始 编写 JavaScript 代码 时 稍 加 注意 即 可 。 


分 注意 : for 关键 字 后 面 的 小 括号 中 是 用 两 个 “;”， 而 不 是 “,”。 初 学 者 比较 容易 忽略 这 个 问 


如 果 修 改 while 结构 中 的 代码 。 例 如 : 


var i=0; 
while(i<10) 


alert(" 我 在 循环 中 "+i); 
break; 
i++; 
} 
此 时 因为 在 循环 结构 中 加 了 break 语句 ,循环 只 会 执行 一 次 , 即 弹出 一 次 对 话 框 之 后 循环 中 断 ， 继 
续 执行 for 循环 后 面 的 语句 。 再 将 代码 改 为 : 


var i=0; 

while(i<10) /while 循环 

攻 
alert(" 我 在 循环 中 "+i); 
continue; /跳出 本 次 循环 
it+; 


注意 : 这 是 一 个 无 效 的 错误 循环 。 


此 时 又 是 男 一 种 效果 ,执行 程序 时 代码 会 弹出 无 数 次 对 话 框 。 事实 上 此 程序 已 成 为 一 个 无 限 循环 ， 
即 死 循环 。 因 为 每 次 执行 到 continue 语句 时 就 跳出 本 次 循环 ，i 的 值 没有 改变 ， 继 续 调 入 下 次 循环 ， 这 
样 的 结果 是 i 始终 为 0，i<10 始终 为 true。 熟 练 掌握 break 和 continue 这 两 个 语句 对 于 以 后 编程 很 有 用 。 
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13.6 了 解 函数 


在 编写 程序 时 ， 经 常 有 几 处 或 者 更 多 地 方 需要 相同 的 功能 。 如 果 在 每 一 处 均 写 相同 的 代码 ， 这 将 
使 得 程序 显得 元 余 。 例 如 ， 在 写 射击 类 游戏 程序 时 ， 最 常用 的 一 段 代 码 就 是 发 射 子弹 ， 在 这 样 一 个 程 
序 中 ， 需 要 发 射 子弹 代码 的 地 方 多 则 有 几 十 处 甚至 上 百 处 。 如 果 在 每 次 都 写 一 段 发 射 子弹 的 程序 ， 这 
样 显然 需要 重复 编写 大 量 的 代码 ， 费 时 费力 达到 相同 的 效果 也 无 可 非议 。 

但 是 当 用 户 要 求 改变 发 射 子弹 的 时 间 间 隔 时 ， 就 会 觉察 到 这 样 做 的 缺点 。 设 计 者 不 得 不 一 处 接 一 
处 地 修改 ， 稍 不 注意 疏 漏 一 处 ， 不 得 不 重新 检查 ， 这 就 是 恶性 循环 。 而 如 果 将 发 射 子弹 的 代码 独立 作 
为 一 个 函数 ， 每 次 使 用 时 直接 调用 即 可 ， 不 仅 节 省 了 大 量 代码 ， 而 且 在 需要 修改 时 只 修改 一 处 即 可 。 
所 以 函数 可 以 令 程序 易 编写 、 易 读 、 易 维护 ， 一 举 三 得 。 通 常情 况 下， 函数 的 语法 格式 如 下 : 

function 函数 名 ([ 参 数 1][, 参 数 2]...[, 参 数 n]) 

' 语句 

[return 表达 式 ;] 

} 

其 中 ，function 是 定义 函数 的 必需 关键 字 。 函 数 名 的 定义 与 前 面 讲 的 变量 定义 一 样 。 小 括号 中 的 参 
数 其 实 就 是 变量 ， 各 个 变量 之 间 用 逗号 〈,) 隔 开 ， 是 为 了 接收 调用 程序 传递 进来 的 参数 。 当 函数 不 需 
要 接收 任何 参数 时 ， 小 括号 中 什么 也 不 写 ， 但 不 能 省 略 小 括号 。 

如 果 调 用 程序 需要 返回 一 个 结果 ， 则 在 定义 时 要 加 return 语句 ， 返 回 结果 。 下 面 通过 例子 来 说 明 
如 何 定义 函数 和 如 何 调用 函数 ， 如 程序 13.3 所 示 为 一 个 简单 的 函数 调用 示例 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 13 章 \13-3 ”简单 的 函数 定义 和 调用 示例 .html】 

【实例 13-3】 简 单 的 函数 定义 和 调用 示例 ， 其 源码 展示 如 下 : 


程序 13.3 简单 的 函数 定义 和 调用 示例 .html 


01 <script language="JavaScript"> 
02 var msg=" 全 局 变量 "; 
03 function maxValue(a,b) 
04 { 

05 var max=-10000; 

06 if(a<b) 

07 

08 max=b; 

09 站 

10 else 

11 i 

12 max=a; 

13 } 

14 return max; 
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15 } 
16 function checkVar() 

17 { 

18 Var msg=" 局 部 变量 "; 

19 alert(msg); 

20 } 

21 

22 var max; 

23 alert("max="+maxValue(23,48)); 
24 licheckVar(); 

25 alert(msg); 

26 </script> 


图 13.5 函数 定义 和 调用 演示 一 图 13.6 ”函数 定义 和 调用 演示 二 


【深入 学 习 】 在 上 面 的 代码 中 ， 定 义 了 两 个 函数 maxValie0 和 checkVar0， 前 者 是 一 个 有 参数 和 返 
回 结果 的 函数 , 通过 接收 调用 函数 传递 的 两 个 值 , 求 出 最 大 值 。 然 后 将 结果 返回 给 调用 函数 。 如 图 13.5 
中 的 “48” 正 是 函数 maxValue(0 的 返回 结果 。 而 checkVar0 是 一 个 没有 参数 、 没 有 返回 结果 的 函数 ， 用 
来 显示 全 局 变量 和 局 部 变量 的 不 同 。 

全 局 变量 是 在 所 有 函数 之 外 定义 的 变量 ， 其 作用 域 是 <script> 标 签 之 间 的 所 有 代码 。 而 局 部 变量 是 
定义 在 函数 之 内 的 变量 ， 其 只 在 所 在 函数 中 有 效 。 如 图 13.6 所 示 ， 运 行 结 果 显 示 全 局 变量 ， 而 不 是 局 
部 变量 。 当 将 程序 13.3 中 第 24 行 和 第 25 行 代码 改 为 : 


24 checkVar(); 
25 /lalert(msg); 


此 时 程序 调用 局 部 变量 所 在 的 函数 ， 运 行 结果 如 图 13.7 所 示 。 


13.7 检查 局 部 变量 和 全 局 变量 的 作用 域 
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另外 ， 由 图 13.6 和 图 13.7 对 比 可 以 知道 ， 浏 览 器 在 按 顺 序 解释 执行 嵌 在 网 页 中 的 脚本 时 ， 不 会 自 
动 解释 执行 位 于 函数 中 的 程序 代码 。 只 有 当 程序 调用 函数 时 ， 函 数 中 的 代码 才 会 执行 。 


注意 : 准确 区 分 “全 局 变量 ”和 “局 部 变量 ”的 概念 ， 避 免 在 编写 程序 时 因为 混淆 全 局 变 


量 和 局 部 变量 而 导致 程序 运行 结果 不 正确 。 


在 编写 JavaScript 时 并 不 是 所 有 的 函数 都 必须 自己 写 ，JavaScript 的 开发 者 在 设计 时 已 经 提供 了 一 
些 系统 函数 供 JavaScript 程序 员 来 使 用 。 常 用 的 JavaScript 系统 函数 如 表 13.7 所 示 。 


表 13.7 常用 的 JavaScript 系 统 函 数 


类 别 | 画 数 示例 
deURI 返回 一 个 URI 字 符 串 encodeURI( "http://www.sina.com/ 天 气 " ) 的 结果 为 
编码 at 编码 后 的 结果 http:/wvww.sina.com/96E596A496A996E696B09694 
处 理 将 已 编码 的 URI 字 符 串 
decodeURI( http://www-.sina.com/96E596A496A996E696B0 
函数 decodeURI | 解码 成 原始 的 字符 串 %94") 的 结果 为 http://www.sina.com/ 天 气 


返回 


将 一 个 字符 串 指定 的 parseInt("2008",10); 将 字符 串 "2008 "转换 为 十 进 制 ， 结 果 
parseInt 站 为 2008 
i parseInt("11",8); 将 字符 串 "10" 转 换 为 八进制 ， 结 果 为 9 


数值 Float 将 一 个 字符 串 转换 成 “| parseFloat("6.6")+1 的 结果 为 7.6， 注 意 区 别 
处 理 Parse 0 | 对 应 的 小 数 parseFloat("6.6"+1) 的 结果 为 6.61 
函数 检测 前 两 个 方法 返回 


值 是 否 为 非 数值 型 ， 如 
果 是 返回 true， 否 则 返 
回 false 
返回 一 个 字符 串 编码 
后 的 结果 字符 串 ， 所 有 
二 字符 都 用 %xx 编 码 ， 其 
字符 让 中 xx 是 表示 该 字符 的 


isNaN isNaN(parseInt("Olympic2008")) 的 结果 为 true 


escape("Olym^_^pic") 的 结果 为 Olym%5E_965Epic 


编码 Unicode 编 码 的 十 六 进 
将 用 escape 方 法 编码 玖 


unescape 结果 字符 串 编码 成 原 ”| unescape("Olym%5E_%5Epic") 的 结果 为 Olym^_^pic 


eval 


eval("var a"+8+"="+8) 相 当 于 var a8=8 


13.7 案例 : 一 个 使 用 基本 语法 的 JavaScript 例子 


在 日 常生 活 中 ， 对 于 上 班 时 间 比 较 灵 活 的 单位 来 说 ， 如 何 能 够 及 时 、 准 确 地 令 公 司 员工 了 解 自己 
的 上 班 时 间 是 一 个 琅 手 的 问题 ， 公 司 的 管理 人 员 不 会 一 个 挨 一 个 电话 通知 ， 而 难免 总 有 员工 会 马虎 弄 
错 自己 的 班 时 。 这 样 ， 可 以 求助 于 Web， 在 公司 的 主页 中 设计 一 个 员工 上 班 时 间 查 询 系统 ， 那 么 公司 
的 员工 就 可 以 通过 网 络 很 方便 地 查询 自己 的 工作 日 期 。 
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要 玫 


Ff 发 的 员工 上 班 时 间 查 询 系统 的 思路 是 可 以 在 员工 登录 到 查询 系统 页 面 后 , 填写 当天 是 星期 儿 ， 


然后 通过 自己 的 员工 号 ， 来 指定 个 人 的 上 班 时 间 查 询 ， 以 及 返回 该 员工 是 第 几 位 访客 。 在 这 个 例子 中 ， 
程序 要 求 员工 号 必须 是 6 位 ， 且 每 一 位 都 是 数字 。 

按照 构思 的 需求 ， 设 计 一 个 简单 的 原型 系统 ， 并 不 会 包含 所 有 实际 需要 的 功能 ， 如 程序 13.4 展示 
的 员工 上 班 时 间 查 询 系统 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 13 章 \13-4 ”员工 上 班 时 间 查 询 系 统 .html】 


【实例 13-4】 员 工 上 班 时 间 查 询 系统 ， 其 源码 展示 如 下 : 


01 


程序 13.4 ”员工 上 班 时 间 查 询 系统 .html 


<html> 
<head> 
<title> 员 工 查 询 系 统 </title> 
</head> 
<script language="javascript"> 
var sum=0; 
function dosubmit(frm) /检查 员工 号 是 否 为 6 位 ， 是 否 全 是 数字 
{ 
if(frm.num.value.length!=6) 
{ 
alert(" 员 工 号 必须 是 6 位 "); 
return false; // 如 果 不 是 6 位 ， 则 返回 错误 
} 
else 
{ 
var num_value=frm.num.value; 
for(var i=0;i<num_value.length;i++) 
叶 
if(num_value.charAt(i)<'0'||Inum_value.charAt(i)>'9') 


alert(" 员 工 号 只 能 是 数字 "); 
return false; 
} 


) 
return true; /lalert(" 输 入 正确 ") 


} 
A* 返 回 星期 几 的 上 班 时 间 ， 周 一 至 周 五 返回 "上 班 时 间 : 9:00-17:30"， 周 六 周 日 
返回 "周末 休息 "*/ 
function checkDay() 
Switch(parselnt(form1.day.value)) 
{ 


case 1: 
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35 Case 2: 

36 Case 3: 

3 Case 4: 

38 Case 5: 

39 alert(" 上 班 时 间 : 9:00-17:30"); 

40 break; 

41 

42 default: 

43 alert(" 周 末 休 息 "); 

44 break; 

45 } 

46 sum+=1; 

47 alert(" 您 是 第 "+sum+" 位 访客 "); 

48 } 

49 </script> 

50 <body> 

51 <center> 

52 <h1> 员 工 查 询 系 统 </h1> 

53 </center> 

54 <form name=form1 action="javascript:checkDay()" method=post onsubmit="return 
55 dosubmit(this)"> 

56 星期 : ”<input type=text name=day><br> 
57 员工 号 : <input type=text name=num ><br> 
58 <input type=submit name=submit1 value=" 递 交 "> 
59 </form> 

60 </body> 

61 </html> 


注意 : 本 例 旨 在 让 读者 体会 JavaScript 一 些 基 本 语法 的 用 法 。alert()、form 对 象 ， 以 及 一 
些 事件 的 用 法 将 在 后 面 的 章节 中 详细 介绍 。 读 者 要 特别 注意 HTML 不 区 分 大 小 写 ， 而 嵌 在 其 中 的 
JavaScript 却 是 严格 区 分 大 小 写 的 ， 一 旦 混淆 ， 将 给 开发 带 来 不 必要 的 麻烦 。 


【运行 程序 】 运 行 上 述 代 码 ， 当 输入 “日 期 -1” 和 “员工 号 =123” 时 ， 单 击 “ 递 交 ” 按 钮 ， 运 行 
结果 如 图 13.8 所 示 。 
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图 13.8 员工 号 不 是 6 位 的 运行 结果 
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【深入 学 习 】 单 击 “ 确 定 ” 按 钮 ， 重 新 输入 “日 期 =1” 和 “员工 号 =12345d” 时 ， 单 击 “ 递 交 ” 按 
钮 ， 运 行 结果 如 图 13.9 所 示 。 在 图 13.9 的 对 话 框 中 单 击 “确定 ”按钮 ， 再 重新 输入 “星期 -2” 和 
工 号 =123456”， 单 击 “ 递 交 ” 按 钮 ， 运 行 结果 如 图 13.10 所 示 。 
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13.9 员工 号 并 非 全 是 数字 时 运行 结果 


图 13.10 员工 号 输入 正确 时 运行 结果 
单 击 “ 确 定 ” 按 钮 ， 弹 出 对 话 框 如 图 13.11 所 示 。 
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13.11 返回 员工 是 第 几 位 访客 
经 过 上 述 例 子 的 演示 ，JavaScript 的 特效 更 进一步 地 显现 出 来 了 。 在 程序 13.4 中 涉及 了 变量 、 基 本 
数据 类 型 、 数 据 类 型 的 转换 方法 、 运 算 符 、 表 达 式 、 流 程控 制 ( 站 结构 、for 结构 ) ， 以 及 函数 的 用 法 。 
笔者 建议 初学 者 照 着 例子 自己 运行 一 下 , 结合 运行 结果 和 代码 更 进一步 地 体会 JavaScript 基本 语法 的 定 
义 和 使 用 。 


13.8 小 结 


5 


通过 本 章 的 学 习 ， 读 者 对 基本 的 程序 语法 有 了 简单 的 概念 ， 也 许 目前 还 不 能 很 好 地 体会 这 些 语法 
究竟 能 做 什么 ， 不 过 了 解 这 些 基础 会 对 今后 的 学 习 有 更 好 的 帮助 。 本 章 是 JavaScript 的 入 门 部 分 ， 主 要 
“242 。 
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介绍 了 脚本 语言 、VBScript 和 JavaScript 的 概念 ， 并 通过 例子 初步 展现 了 脚本 语言 的 魅力 。JavaScript 
很 容易 使 人 望 文生 义 ， 不 自觉 地 就 与 Java 联系 起 来 ， 但 是 JavaScript 与 Java 有 着 很 大 的 不 同 ， 区 分 这 
两 个 概念 可 以 使 初学 者 避免 一 些 错误 。 

JavaScript 基本 语法 是 本 章 的 主要 内 容 ， 包 括 标识 符 、 基 本 数据 类 型 、 运 算 符 、 表 达 式 、 流 程控 制 
语句 和 函数 。 通 过 简单 的 几 行 代码 来 分 别 介绍 这 些 语法 ， 最 后 通过 “员工 工作 时 间 查 询 系统 ”这 个 案 
例 集中 展示 了 JavaScript 基本 语法 的 用 法 。 在 后 面 的 章节 中 将 开始 介绍 表单 在 页 面 中 的 效果 , 表单 是 商 
业 网 站 的 重要 部 分 。 
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将 JavaScript 引入 HTML 的 目的 在 于 实现 客户 与 浏览 器 的 动态 交互 , 第 13 章 已 经 初步 体验 到 了 其 
效果 。JavaScript 是 基于 对 象 的 脚本 语言 ， 即 所 有 的 编程 均 以 对 象 为 出 发 点 。 把 JavaScript 中 的 元 素 划 
分 给 大 大 小 小 的 对 象 ， 对 象 中 仍然 可 以 包含 对 象 。 通 过 学 习 将 更 进一步 体验 JavaScript 的 特效 。 例 如 ， 
在 描述 银行 系统 时 ， 银 行 员工 具有 名 字 、 职 位 、 考 核 成 绩 等 属性 ， 同 时 还 必须 包括 员工 可 以 执行 的 存 
款 、 核 算 、 打 印 单据 等 操作 ， 在 设计 网 页 时 ， 要 访问 每 一 个 员工 的 属性 和 操作 该 怎么 实现 呢 ? 本 章 将 
详细 阐述 。 本 章 的 知识 点 如 下 。 

对 象 的 概念 、DOM 是 什么 。 
JavaScript 中 的 一 个 重要 数据 结构 
JavaScript 中 常用 的 内 部 对 象 。 
window 对 象 的 属性 、 方 法 和 事件 。 
document 对 象 的 属性 、 方 法 和 事件 。 
一 个 JavaScript 实现 的 动态 页 面 。 


数组 。 


OOOODODO 


14.1 了 解 一 下 何 为 “对 象 ” 


“对 象 ” 这 个 词 相信 大 家 都 不 陌生 ， 在 很 多 计算 机 语言 中 都 有 这 个 概念 ， 所 以 才 称 这 些 编程 语言 
为 面向 对 象 的 ， 表 示 这 是 一 类 事物 。 在 生活 中 ， 如 果 你 是 一 个 销售 商 ， 你 把 你 的 产品 卖 给 你 的 客户 ， 
那么 你 的 客户 就 是 你 的 销售 对 象 ， 其 实 这 与 编程 语言 中 的 “对 象 ” 颇 有 相似 性 。JavaScript 中 的 对 象 是 
指 JavaScript 这 门 语言 所 服务 的 一 类 事物 。 


14.1.1 JavaScript 对 象 概述 


JavaScript 中 的 对 象 与 面向 对 象 编 程 语言 中 的 类 的 概念 相似 ， 是 对 一 类 事物 的 描述 。 但 与 面向 对 象 
的 编程 语言 不 同 的 是 ，JavaScript 对 象 没 有 抽象 、 继 承 、 重 载 等 功能 。JavaScript 中 的 对 象 一 般 包括 属 
性 和 方法 两 个 基本 元 素 。 对 象 的 属性 是 反映 对 象 某 些 特定 性 质 的 ， 是 信息 的 装载 单位 ， 可 以 理解 为 变 
量 。 例 如 ， 窗 口 的 大 小 、 文 字 的 颜色 等 。 而 对 象 的 方法 是 指 对 象 可 以 执行 的 动作 ， 这 些 动作 能 够 按照 
设计 者 的 意图 被 执行 ， 可 以 理解 为 函数 。 例 如 ， 提 交 表 单 、 鼠 标 单 击 的 处 理 函数 等 。 

对 象 是 一 个 抽象 的 概念 ， 将 其 具体 化 之 后 就 是 对 象 实例 ， 也 就 是 说 对 象 与 对 象 实例 是 一 般 与 具体 
的 关系 。 例 如 ，“ 汽 车 ”表示 一 类 有 发 动机 、 四 轮 的 事物 ， 是 一 个 对 象 ， 而 “奥迪 A6” 表 示 一 种 特定 
型 号 的 汽车 ， 是 一 个 对 象 实例 。 

那么 对 象 和 对 象 实例 是 怎么 联系 的 呢 ? 答案 是 构造 函数 。 构 造 函 数 是 用 来 创建 对 象 实例 的 函数 。 
在 定义 对 象 时 可 以 自己 定义 构造 函数 ， 如 果 没 有 定义 解释 器 ， 则 会 默认 定义 一 个 构造 函数 ， 如 以 下 这 


个 例子 : 
var objectinstance=new objectName([ 参 数列 表 ]) ; 
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其 中 ，objectInstance 表示 将 要 创建 的 对 象 实例 的 名 字 ，objectName 则 是 对 象 名 字 ， 参 数列 表 是 创 
建 对 象 实例 时 传递 的 参数 ，[] 表 示 可 以 选择 ， 参 数 的 个 数 是 零 个 或 多 个 。 

当 创建 了 对 象 实例 之 后 ， 就 可 以 访问 对 象 实例 的 属性 和 方法 。 最 常用 的 访问 方式 是 在 对 象 实例 后 
面 加 上 一 个 点 〈.) 和 一 个 成 员 名 《属性 或 者 方法 ) 。 如 果 对 象 实例 后 面 跟 的 成 员 名 没有 定义 过 ， 浏 览 
器 执行 时 应 当 作为 这 个 对 象 实例 新 增 一 个 成 员 。 这 就 是 JavaScript 的 特殊 之 处 , 可 以 无 限 地 为 对 象 实例 
添加 新 成 员 。 另 外 ， 在 访问 对 象 实例 的 属性 时 可 以 采用 格式 “对 象 实例 名 [属性 名 字符 串 ]”。 这 种 格式 
可 以 实现 对 对 象 属性 动态 访问 的 效果 。 如 程序 14.1 中 的 定义 及 访问 对 象 实例 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 14 章 \14-1 定义 及 访问 对 象 实例 .html】 


【实例 14-1】 定 义 及 访问 对 象 实例 ， 其 源码 展示 如 下 : 


程序 14.1 定义 及 访问 对 象 实例 .html 
<script language="javascript"> 


function Employee() /定义 构造 函数 

{ 

} 

var employee=new Employee(); // 初 始 化 对 象 实例 employee 
employee.name="LiMIng"; /| 给 employee 新 增 一 个 成 员 变 量 name 
employee.id="031256"; /| 给 employee 新 增 一 个 成 员 变 量 id 
function query() 


{ 
alert(employee.name+"->"+employee.id); 


} 

employee.queryInfo=query; /| 给 employee 新 增 一 个 方法 
employee.querylnfo(); 

</script> 


【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 14.1 所 示 。 


(JiViaya 编 号 \FirstWAVenployaehta |- 口 |X 


SO runsvirtu 国 sx 
安安 [CrviwaSswirstr. 中 全 


Windows Internet Explorer 辆 | 


A me 


图 14.1 定义 及 访问 对 象 实例 


.245 


CSS mgt 


【深入 学 习 】 实 例 14-1 实现 的 内 容 是 : 
(1) 定义 一 个 构造 函数 Employee0， 这 一 步 相 当 于 定义 好 了 对 象 。 
(2) 使 用 new 关键 字 就 可 以 来 创建 对 象 实例 employee。 
(3) 为 对 象 实例 employee 添加 name 和 id 两 个 属性 ， 并 添加 一 个 方法 query0。 
(4) 调用 对 象 实例 employee 的 方法 。 
如 图 14.1 所 示 ， 可 以 看 到 浏览 器 在 解释 该 段 程序 时 调用 了 queryInfo0 方 法 ， 这 就 表明 代码 成 功 地 
定义 和 访问 了 对 象 。 


14.1.2 DOM 介绍 


在 JavaScript 中 有 许多 对 象 ， 设 计 者 通过 什么 方式 来 组 织 这 些 对 象 呢 ? 这 就 需要 了 解 一 个 新 概 
念 一 -DOM。 

DOM (Document Object Model) 即 文档 对 象 模型 ， 它 是 W3C 的 标准 。 它 的 功能 是 把 浏览 器 支持 
的 文档 (包括 HTML、XML、XHTML) 当 作 一 个 对 象 来 解析 。DOM 实际 上 是 一 个 操作 文档 中 所 包含 
的 一 个 编程 的 API， 人 允许 开发 人 员 从 文档 中 读 取 、 搜 索 、 修 改 、 增 加 和 删除 数据 。 


宇 半 。 说 了 明 : DOM 是 与 平台 和 语言 无 关 的 ， 就 是 说 只 要 是 支持 DOM 的 平台 和 编程 语言 


用 来 编写 文档 。 


DOM 里 面 有 专门 的 HTML 和 XML 的 对 象 模型 。 用 它们 来 操作 文档 元 素 非 常 方便 。DOM 可 以 视 
为 一 种 API 的 应 用 。 也 就 是 说 ， 将 文件 视 为 一 个 文件 对 象 ， 通 过 程序 语言 调用 DOM 对 象 ， 来 对 该 文 
件 的 某 些 特定 数据 进行 访问 操作 。 并 且 利 用 程序 将 获取 的 对 象 数据 做 更 进一步 的 应 用 。 可 以 利用 DOM 
方法 和 属性 去 通过 语言 (如 VBScript、JavaScript、ASP) 操作 XML 文件 。 

简单 地 说 ，DOM 是 指 对 象 及 对 象 之 间 的 层次 关系 。 可 以 通过 简单 的 示例 来 了 解 DOM 的 概念 。 汽 
车 、 车 窗 、 玻 璃 这 几 个 对 象 ， 玻 璃 附属 于 车 窗 ， 而 车 窗 附 属于 汽车 ， 类 似 如 此 ， 各 个 对 象 有 着 层次 关 
系 。JavaScript 中 文档 对 象 的 结构 如 图 14.2 所 示 。 


ox 
s[]; Element 表单 元 素 对 象 


se 重 置 按钮 对 象 
Select 选择 区 ( 下 拉 菜 单 、 列 表 ) 对 象 
对 ; 


于 options[]; Option 
it 


14.2 文档 对 象 结构 图 
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注意 : 在 图 14.2 中 可 以 清楚 地 看 到 文档 对 象 中 各 对 象 之 间 的 并 列 关系 、 包 含 关系 ， 从 而 可 
习 对 象 的 位 置 。DOM 是 语言 无 关 的 API， 这 意味 着 其 实现 并 不 与 Java、JavaScript 或 者 其 
。 然 而 ， 鉴 于 本 书 的 目的 ， 接 下 来 主要 集中 在 JavaScript 的 实现 上 。 


时 ， 常 常 涉及 事件 、 事 件 驱动 和 事件 处 理 这 儿 个 概念 。 事 件 是 指 通 过 单 击 鼠 标 或 者 敲 
窗口 或 网 页 元 素 上 执行 操作 。 引 起 事件 的 原因 称 为 事件 源 。 例 如 ， 单 击 页 面 上 的 “ 提 
就 产生 了 鼠标 单 击 事件 。 此 处 的 “提交 ”按钮 就 是 事件 源 。 事 件 处 理 是 对 象 化 编程 的 
节 ， 没 有 了 事件 处 理 ， 程 序 就 会 变 得 很 死 ， 缺 乏 灵活 性 。 事 件 的 处 理 程序 可 以 是 任意 
一 般 是 通过 程序 或 函数 对 事件 进行 处 理 。 


注意 : 图 14.2 中 有 些 对 象 是 全 小 写 的 ， 有 些 是 以 大 写字 母 开 头 的 。 以 大 写字 母 开 头 的 对 象 


表示 直接 用 对 象 的 “名 字 ” (ld 或 Name) ， 或 用 其 所 属 的 对 象 数组 指定 。 


14.2 JavaScript 中 的 数组 


JavaScript 中 的 数组 是 最 常用 的 数据 结构 之 一 , 是 用 一 个 变量 来 存储 一 组 数据 , 是 一 组 数据 的 集合 。 


每 个 数据 是 数组 


的 一 个 元 素 ， 每 一 个 数据 都 有 相应 的 索引 ， 因 为 数组 是 严格 有 序 的 。 索 引号 以 0 开始 ， 


直到 数组 的 length-1。 为 了 存 取 数 组 中 任意 一 个 元 素 ， 需 要 采用 “数组 名 [索引 号 ]” 的 形式 。 与 其 他 编 
程 语言 不 同 的 是 ， 同 一 个 JavaScript 数组 的 元 素 可 以 是 不 同 的 数据 类 型 。 

JavaScript 的 数组 属于 核心 语言 对 象 ， 而 不 是 文档 对 象 模型 。JavaScript 的 数组 大 小 不 要 求 确定 。 将 数 
据 收 集 到 数组 中 可 简化 数据 管理 。 例 如 ， 通 过 使 用 数组 ， 只 使 用 一 个 参数 就 可 以 将 一 组 名 称 传递 给 函数 。 


14.2.1 定义 数组 和 操作 数组 


JavaScript 中 的 数组 定义 方法 一 般 来 说 有 3 种 : 一 种 是 匿名 的 方式 ,一 种 是 通过 new Array0， 男 一 
种 是 在 定义 时 直接 赋值 。 
匿名 方式 定义 的 格式 是 : 


var arrA=[]; 


或 通过 new Array0 定 义 的 格式 是 : 


var arrA=new 


Array(); 


上 面 这 两 种 定义 方式 的 效果 是 一 样 的 ， 就 是 分 配 存储 空间 。 在 使 用 时 给 arrA 赋值 ， 例 如 : 


arrA[0]='2000" 


arrA[1]= '2004'; 
arrA[2]= '2008'; 
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此 外 ， 定 义 时 直接 赋值 的 写法 是 : 

arrA=[2000",2004',20081; 

在 访问 数组 中 的 元 素 时 采用 “数组 名 [索引 号 ]” 的 形式 。 

定义 数组 之 后 便 是 操作 数组 。 在 JavaScript 中 为 数组 定义 了 一 些 系统 方法 ,可 以 方便 开发 者 实现 操 
作 程序 。 可 以 说 这 些 方法 是 开发 者 非常 喜爱 使 用 的 。 对 于 初学 者 来 说 ， 这 些 方法 更 是 可 以 达到 事 半 功 


口 ”shif( 方 法 : 删除 原 数组 第 一 项 ， 并 返回 删除 元 素 的 值 ， 如 果 数 组 为 室 ， 则 返回 undefined。 
例如 : 

var arrA = [1,2,3,4,5]; /定义 一 个 数组 ， 包 含 5 个 元 素 

var arrB = arrA.shift(); llarrA=[2,3,4,5] arrB=1 


口 unshiftO 方 法 : 将 参数 参加 到 原 数组 开头 ， 并 返回 数组 的 长 度 。 例 如 : 


var arrA = [1,2,3,4,5]; 
var arrB = arrA.unshift(2008,2012); WarrA=[2008,2012,1,2,3,4.5] arrB=7 


口 ”pop() 方 法 : 删除 原 数组 最 后 一 项 ， 并 返回 删除 元 素 的 值 ， 如 果 数 组 为 室 ， 则 返回 undefined。 
例如 : 


Var arrA = [1,2,3,4,5]; 
var arrB = arrA.pop(); larrA=[1,2,3,4] arrB=5 


口 ”push(0 方 法 : 将 参数 添加 到 原 数 组 末尾 ， 并 返回 数组 的 长 度 。 例 如 : 


var arrA = [1,2,3,4,5]; 
var arrB = arrA.push(2008,2012);  //arrA=[1,2,3,4,5,2008,2012] arrB=7 


口 “concat() 方 法 : 返回 一 个 新 数组 ， 将 参数 添加 到 原 数组 末尾 。 例 如 : 

var arrA = [1,2,3,4,5]; 

var arrB = arrA.concat(2008,2012,2016);  //arrB=[1,2,3,4,5,2008,2012,2016] 

口 ”spice0 方 法 : 例如 ，spice(start,Count,paral,para2,…):; 表 示 从 start 开始 删除 Count 项 ， 并 从 该 位 
署 起 插入 paral、para2 等 参数 。 例 如 : 

var arrA = [1,2,3,4,5]; 

var arrB = arrA.spice(2,2,2008,2009,2010); 


var arrB=arrA.spice(0,1); // 此 时 运行 结果 同 shift() 一 样 
arrA.spice(0,0,-2,-1); var arrB=arrA.length; 。 ”// 此 时 运行 结果 同 unshift() 方 法 一 样 
var arrB=arrA.spice(arrA.length-1,1); 儿 /此 时 运行 结果 同 pop() 方 法 一 样 


arrA.spice(arrA.length,0,6,7);var arrB=arrA.length; ”// 此 时 运行 结果 同 push() 方 法 一 样 
口 reverse() 方 法 : 将 数组 反 序 。 例 如 : 


var arrA = [1,2,3,4,5]; 
var arrB = arrA.reverse(); llarrB=[5,4,3,2,1] 


口 sort0 方 法 : 对 数组 进行 排序 。 例 如 : 
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Var arrA = [6,2,8,3,5]; 
var arrB = arrA.sort(); llarrB=[2,3,5,6,8] 


口 slice( 方 法 : 返回 从 原 数组 中 指定 开始 下 标 到 结束 下 标 之 间 的 项 共同 组 成 的 新 数组 。 例 如 : 


var arrA = [1,2,3,4,5]; 
var arrB = arrA.slice(2,3); llarrB=3 


口 join0 方 法 : 将 数组 的 元 素 组 成 一 个 字符 串 ， 以 sign 为 分 隔 符 ， 省 略 则 默认 用 逗号 为 分 隔 符 。 
例如 : 


Var arrA = [1,2,3,4,5]; 
var arrB = arrA.join("->"); llarrB= "1->2->3->4->5", 


下 面 来 展示 一 下 以 上 这 些 方法 在 页 面 中 实际 应 用 的 效果 ， 如 程序 14.2 的 页 面 。 
【本 节 示 例 参考 : 资料 光盘 \ 第 14 章 \14-2 ”数组 方法 .html】 
【实例 14-2】 数 组 方法 ， 其 源码 展示 如 下 : 


程序 14.2 数组 方法 .html 


01 <script language="javascript"> 

02 var arrA = [1,2,3,4,5]; // 定 义 一 个 数组 ， 包 含 5 个 元 素 
03 document.write(" 数 组 arrA=["+arrA+"]"+"<br>");  // 读 取 该 数组 

04 var arrB = arrA.shift(); 

05 document.write("shift() 方 法 的 效果 :arrA=["+arrA+"], 删 除 的 元 素 : "+arrB+"<br>"); 
06 var arrC = arrA.unshift(2008,2012); 

07 document.write("unshift() 方 法 的 效果 :arrA=["+arrA+"], 数 组 长 度 : "+arrC+"<br>"); 
08 var arrD = arrA.pop(); 

09 document.write("pop() 方 法 的 效果 :arrA=["+arrA+"], 删 除 的 元 素 : "+arrD+"<br>"); 
10 var arrE = arrA.push(2008,2012); 

11 document.write("push() 方 法 的 效果 :arrA=["+arrA+"], 数 组 长 度 : "+arrE+"<br>"); 
12 var arrF = arrA.concat(2008,2012,2016); 

i document.write("concat() 方 法 的 效果 :arrF=["+arrF+"]"+"<br>"); 

14 

15 var arrT = [1,2,3,4,5]; // 定 义 一 个 数组 ， 包 含 5 个 元 素 
16 document.write("arrT=["+arrT+"]"+"<br>"); 

1 var arrG = arrT.reverse(); /将 数组 元 素 倒序 排列 

18 document.write("reverse() 方 法 的 效果 :arrG=["+arrG+"]"+"<br>"); 

19 var arrH = arrT.sort(); /将 数组 排序 

20 document.write("sort() 方 法 的 效果 :arrH=["+arrH+"]"+"<br>"); 

21 var arrl = arrT.slice(2008,2009); 

22 document.write("slice() 方 法 的 效果 :arrl=["+arrl+"]"+"<br>"); 

23 var arrJ = arrT .join("->"); /将 数组 元 素 组 成 一 个 字符 串 ， 以 "->" 分 割 
24 document.write("join() 方 法 的 效果 :arrJ=["+arrJ+"]"+"<br>"); 

25 </script> 
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【运行 程序 】 浏 览 该 页 面 ， 运 行 结果 如 图 14.3 所 示 。 


1 
,数组 长 度 ，rmdefined 


的 元 村 
对 组 长 度 ，7 
2008, 2012, 2016] 


sen Rr 


图 14.3 数组 方法 演示 结果 


说 明 : 通常 情况 下 , 排序 只 需要 使 用 sort() 方 法 即 可 。 删 除数 组 的 头 元 素 和 最 后 一 个 元 素 等 ， 


使 用 数组 的 系统 方法 即 可 。 


14.2.2 ”多维 数组 

JavaScript 中 严格 地 讲 没有 多 维 数组 ， 然 而 这 种 数据 结构 是 非常 需要 的 。 在 开发 过 程 中 可 以 通过 数 
组 风 套 来 实现 ， 即 数组 元 素 本 身 又 是 数组 。 例如， 管理 一 组 奥运 志愿 者 的 信息 ， 小 组 包括 5 名 志愿 者 ， 
而 每 名 志愿 者 的 信息 包括 姓名 、 年 龄 、 籍 贯 、 学 校 、 所 属 小 组 和 编号 等 。 此 时 就 可 以 用 堪 套 数组 来 定 
义 。 格 式 如 下 : 

数组 变量 名 [ 子 数组 索引 号 ][ 子 数组 中 的 元 素 索 引号 ] 

这 是 一 个 嵌 套 数组 的 例子 。 

var arr=[["zhangsan",23,"031256"],["Lisi",22,"031266"],[" Wangwu",21,"031245"]]; 

这 个 数组 中 包含 3 个 子 数组 ,每 个 子 数组 描述 个 人 的 信息 , 包 插 姓名、 年龄. 编号。 通过 arr[i](i=0,1,2) 
来 访问 任何 一 个 子 数组 ， 而 通过 arr[ilj] (ij=0,1,2) 来 访问 子 数组 中 的 任何 一 个 元 素 。 


说 明 : 本 书 对 于 JavaScript 的 介绍 仅 是 泛泛 而 谈 ， 为 的 是 令 读者 从 HTML 语言 更 好 地 过 渡 


到 学 习 JavaScript。 如 果 读 者 希望 了 解 更 多 的 使 用 JavaScript 的 技巧 ， 需 要 查阅 相关 的 书籍 。 


143 内 部 对 象 


JavaScript 中 有 一 些 常用 的 内 部 对 象 〈 也 称 核心 对 象 ) ， 在 引用 某 些 对 象 的 属性 和 方法 时 不 需要 使 
用 new 关键 字 来 创建 对 象 实例 ， 而 是 可 以 直接 采用 “对 象 名 .成 员 ” 的 格式 来 访问 。 这 样 的 对 象 称 为 静 
态 对 象 ， 与 之 对 应 ， 需 要 用 new 关键 字 来 创建 对 象 实例 的 对 象 ， 称 之 为 动态 对 象 。 常 用 的 内 部 对 象 有 
Math 对 象 、Date 对 象 和 String 对 象 。 
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14.3.1 Math 对象 


JavaScript 中 提供 了 一 些 数学 工具 , 可 以 大 大 地 节省 开发 者 的 时 间 , 而 无 须 将 精力 耗费 在 求 绝对 值 、 
平方 根 ， 以 及 三 角 函 数值 等 数学 处 理 上 。 这 个 对 象 与 JavaScript 中 的 其 他 对 象 不 同 ， 开 发 者 无 须 通过 
new 来 生成 对 象 实例 。Math 是 静态 对 象 ， 直 接 通 过 对 象 引用 相应 的 属性 和 方法 即 可 。 

Math 对 象 的 属性 通常 是 常数 ， 其 使 用 的 方法 很 多 ， 包 括 三 角 函 数 、 反 三 角 函 数 ， 还 有 一 些 预 定义 
的 数学 函数 。 


14.3.2 Date 对 象 


生活 中 ， 人 们 通过 月 历年 历 等 方法 计数 “准确 的 某 年 某 月 某 日 ”。 在 JavaScript 中 ， 有 专门 这 样 的 
一 个 对 象 用 来 描述 日 期 和 时 间 。 这 个 对 象 是 Date 对 象 ， 它 的 日 期 和 时 间 是 按照 GMT〔 即 格林 威 治 时 
间 ) 来 计量 的 。 在 计算 机 内 部 日 期 时 间 是 一 个 整数 ， 从 1970 年 1 月 1 日 0 点 0 分 0 秒 起 相对 某 个 日 期 
时 间 的 以 毫秒 为 单位 的 数值 ， 通 过 这 个 数值 可 以 计算 出 其 相应 的 具体 日 期 时 间 。 

Date 对 象 的 最 简单 的 构造 函数 是 Date0， 格 式 写法 是 : 


var today=new Date(); 

上 面 的 方法 定义 了 Date 对 象 的 实例 , 也 可 以 通过 构造 函数 来 表示 过 去 或 者 将 来 的 某 个 时 间 。 例 如 : 
var past=new Date(2000,1,1); // 创 建 一 个 对 象 实例 ， 值 是 2000 年 1 月 1 日 
var tomorrow=new Date(2012,6,6); /创建 一 个 对 象 实例 ， 值 是 2012 年 6 月 6 日 


注意 : 此 处 有 个 问题 容易 出 错 , past 的 值 是 Tue Feb 1 00:00:00 UTC+0800 2000, tomorrow 
的 值 是 Fri Jul 6 00:00:00 UTC+0800 2012， 显 示 的 结果 是 参数 中 月 份 +1。 


14.3.3 String 对 象 
String 对 象 是 动态 对 象 ， 需 要 通过 new String0 创 建 对 象 实例 来 调用 属性 和 方法 。 事 实 上 任何 一 个 


象 的 属性 和 方法 。 


注意 : 这 两 种 调用 方法 的 区 别 ， 可 以 采用 typeof() 来 体现 : 
typeof(new String("Beijing2008")); 
typeof("Beijing2008"); 


前 者 返回 的 是 object 类 型 ， 而 后 者 返回 的 是 string 类 型 。 


常用 的 String 对 象 属性 有 constructor 属性 和 length 属性 。 
口 “constructor 属性 : 表示 创建 对 象 的 函数 。 例 如 : 


2 


CSS px nt 


stringA= new String("Beijing2008"); /创建 一 个 字符 串 对 象 实例 
if(stringA.constructor==String) /检查 是 否 创建 了 一 个 字符 串 对 象 实例 
alert(stringA); 


由 运行 可 知 ， 判 断 条 件 为 真 ， 执 行 了 弹出 对 话 框 显示 字符 串 的 操作 。 另 外 一 个 属性 是 length 属性 ， 
它 是 String 对 象 最 常用 的 属性 之 一 。 
口 length 属性 : 返回 字符 串 的 长 度 ， 例 如 : 


stringA= new String("Beijing2008"); /创建 一 个 字符 串 对 象 实例 
leng=stringA.length; 
或 者 也 可 以 写 为 : 
stringA="Beijing2008"; // 创 建 一 个 字符 串 对 象 实例 


leng=stringA.length; 


通过 使 用 这 两 种 定义 方式 分 别 来 调用 String 对 象 的 length 属性 。 由 运行 结果 可 知 ， 两 者 返回 的 结 
果 一 样 ， 都 是 11。 


说 明 : 使 用 String 对 象 的 方法 很 多 ， 其 作用 包括 用 于 查找 和 匹配 字符 串 中 字符 的 方法 ， 或 


者 是 用 于 提取 子 字符 串 的 方法 和 改变 字符 串 大 小 写 的 方法 等 。 


14.4 window 对 象 


window 对 象 对 于 文档 对 象 模型 的 最 高 层 ， 代 表 浏 览 器 的 整个 窗口 ， 是 最 大 的 一 个 对 象 ， 因 为 所 有 
的 事件 都 发 生 在 窗口 中 。 开 发 者 可 以 通过 window 对 象 的 属性 、 方 法 和 事件 处 理 来 控制 浏览 器 的 显示 效 
果 。 不 必 专 门 在 JavaScript 代码 中 创建 window 对 象 。 当 打开 浏览 器 以 后 会 自动 打开 一 个 窗口 ， 这 个 窗 
口 就 是 一 个 可 用 的 window 对 象 。 在 调用 其 属性 和 方法 时 ， 不 需要 用 window.xxx 的 格式 ， 可 以 省 略 
window 这 个 前 级 。 


14.4.1 window 对 象 属性 


在 JavaScript 语言 中 ，window 属性 有 很 多 ， 接 下 来 通过 一 个 实例 来 观察 这 些 属性 的 效果 。 这 其 中 
包含 name 属性 、closed 属性 和 opener 属性 。 
口 name 属性 的 作用 是 设置 或 获取 表明 窗口 名 称 的 值 。 
口 closed 属性 的 作用 是 获取 引用 窗口 是 否 已 关闭 。 
口 “opener 属性 的 作用 是 设置 或 获取 创建 当前 窗口 的 引用 。 
具体 在 案例 中 的 使 用 如 程序 14.3 和 程序 14.4 的 页 面 ， 这 是 应 用 window 对 象 的 JavaScript 程序 。 
【本 节 示 例 参考 : 资料 光盘 \ 第 14 章 \14-3 ”window 对 象 的 主页 面 .html】 


【实例 14-3】window 对 象 的 主页 面 ， 其 源码 展示 如 下 : 
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程序 14.3” window 对象 的 主页 面 .html 


01 <head> 

02 <script> 

03 Var pop; 

04 pop= window.open 

05 ("child.htm","pop","width=255,height=235,resizable=1,scrollbars=auto,toolbar=no, 
06 menubar=no,location=0,top=10,left=200"); /打开 子 页 面 child.htm 
07 window.name=" 测 试 Opener 属性 "; 

08 alert(window.screenLeft+":"+window.screenTop); 

09 function b1(X{ // 如 果子 窗口 还 没有 关闭 ， 则 关闭 它 

10 if(!pop.closed) 

11 { 

12 pop.close(); 

13 } 

14 } 

15 </script> 

16 </head> 

17 <body> 

18 window 属性 示例 <p> 

19 <font color=red onmouseover="javascipt:window.status=' 鼠 标 指向 我 
20 onmouseout="javascipt window.status=' 鼠 标 没有 指向 

21 我 "> 把 鼠标 移动 这 里 来 </font> <br> <!-- 触 发 展 标 事件 一 > 

22 <input type="button" name="b1" value=" 关 闭 窗 口 " onclick="javascript:b1();"> 
23 </body> 


【本 节 示 例 参 考 : 资料 光盘 \ 第 14 章 \14-4 child.html】 
【实例 14-4】window 对 象 的 子 页 面 ， 其 源码 展示 如 下 : 
程序 14.4 child.html 


01 <html> 

02 <body> 

03 这 是 一 个 测试 文件 ， 用 于 测试 文件 的 打开 与 关闭 。 

04 <p><font color=red onclick="javascipt: alert(window.opener.name);"> 单 击 显示 父 窗口 
05 的 名 称 </font> /触发 onclick 事件 

06 </body> 

07 </html> 


【运行 程序 】 浏 览 该 页 面 ， 上 边 代码 中 有 两 个 文件 ， 主 页 面 实现 的 功能 是 : 

(1) 打开 一 个 新 页 面 ， 并 通过 一 些 属性 设置 新 页 面 。 

(2) 如 程序 14.3 中 第 7 行 ， 通 过 window.name 设置 窗口 的 名 称 为 “测试 Opener 属性 ”。 

(3) 同时 弹出 对 话 框 显示 浏览 器 客户 区 左上 角 相 当 于 屏幕 左上 角 的 x、y 坐标 。 

(4) 通过 鼠标 移动 事件 检查 浏览 器 状态 栏 的 变化 。 

(5) 关闭 子 窗口 功能 ， 通 过 closed 属性 检查 子 窗口 是 否 已 经 关闭 。 而 子 页 面 实 现 的 功能 是 : 显示 
父 窗口 的 名 称 。 


Ss 
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实例 14-3 运行 的 结果 如 图 14.4 所 示 。 

【深入 学 习 】 首 先 浏览 器 中 能 看 到 弹出 的 对 话 框 ， 对 话 框 中 显示 的 坐标 值 是 对 话 框 相当 于 屏幕 左 
上 角 的 x、y 坐标 , 并 且 弹 出 子 页 面 ， 它 的 作用 是 测试 文件 的 打开 和 关闭 。 如 图 14.5 所 示 ， 当 单 击 子 页 
面 中 红色 文本 “ 单 击 显示 父 窗口 的 名 称 ” 时 , 页 面 弹出 对 话 框 表 明 主 页 面 的 名 称 为 “测试 Opener 属性 ”。 

当 单 击 主页 面 的 “确定 ”按钮 后 ， 如 图 14.5 所 示 。 如 果 鼠 标 放置 的 位 置 没 有 在 红色 文本 字体 上 ， 
则 状态 栏 显 示 “ 鼠 标 没 有 指向 我 ”; 反之 ， 如 果 鼠 标 移动 到 红色 文本 字体 上 时 ， 则 页 面 显示 “鼠标 指 
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这 是 一 个 测试 文件 ， 用 于 测试 文 


左上 角 相对 于 窗口 左上 角 l s Internet Explorer ( 莘 | 
的 x、y 坐 标 一 J LN openerat 
EE 
图 14.4 主页 面 显示 效果 图 14.5 子 页 面 显示 效果 
此 时 再 单 击 主页 面 的 “关闭 窗口 ”按钮 ， 即 图 14.6 所 示 的 效果 ， 单 击 “ 关 闭 窗口 ”按钮 ， 子 窗口 


就 被 关闭 。 这 体现 了 closed 属性 的 效果 。 


文件 上 )” 钨 辑 E) 查看 WV) 收 藏 天 ” 


”| 镍 c:\Docments ma :加 


交 人 cDocments md se 
indom 属 性 示例 
把 鼠标 移动 这 里 来 

关闭 再 品 


14.6 单 击 “ 确 定 ” 按 钮 后 的 显示 结果 


说 明 : window 对 象 的 属性 还 有 很 多 ， 如 表 14.1 所 示 。 


表 14.1 window 对 象 的 属性 


属 性 名 描述 
defaultStatus 设置 或 获取 要 在 窗口 底部 的 状态 栏 上 显示 的 默认 信息 
dialogArguments 设置 或 获取 传递 给 模式 对 话 框 窗口 的 变量 或 变量 数组 
dialogHeight 设置 或 获取 模式 对 话 框 的 高 度 
dialogLeft 设置 或 获取 模式 对 话 框 的 左 坐 标 
dialogTop 设置 或 获取 模式 对 话 框 的 项 坐标 
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续 表 

属 性 名 描述 
dialogWidth 设置 或 获取 模式 对 话 框 的 宽度 
frameElement 获取 在 父 文档 中 生成 window 的 frame 或 这 ame 对 象 
length 设置 或 获取 集合 中 对 象 的 数目 
offscreenBuffering 设置 或 获取 对 象 在 对 用 户 可 见 之 前 是 否 要 先 在 屏幕 外 绘制 
opener 设置 或 获取 创建 当前 窗口 的 引用 
TetumValue 设置 或 获取 从 模式 对 话 框 返回 的 值 
screenLeft 获取 浏览 器 客户 区 左上 角 ， 相 当 于 屏幕 左上 角 的 x 坐标 
screenTop 获取 浏览 器 客户 区 左上 角 ， 相 当 于 屏幕 左上 角 的 y 坐标 
self 获取 对 当前 窗口 或 框架 的 引用 
status 设置 或 获取 位 于 窗口 底部 状态 栏 的 信息 
to 获取 最 顶层 的 祖先 窗口 


14.4.2 ”window 对 象 方法 
所 谓 方法 即 是 如 何 通过 window 对 象 属性 来 使 这 些 属性 发 挥 各 自 的 作用 。 和 属性 一 样 ，window 对 


对 象 的 属性 调用 。 

口 “open(0、close( 方 法 : 产生 新 窗口 的 方法 就 是 window.open0。 例 如 : 

01 varnewWindow1=window.open("world.html","world","height=300,width=400"); 
02 varnewWindow2=window.open("../world.html","we","height=100, resizable=no"); 
03 varnewWindow3=window.open 

04 ("http://www.sohu.com/","sohu","height=100,width=200,resizable=no, 

05 menubar=yes,toolbar=no"); 

上 述 例 子 定 义 了 变量 (如 newWindow1) ， 当 运行 window.open0 方 法 时 将 新 窗口 的 引用 赋 给 变量 
newWindow1， 之 后 就 可 以 通过 引用 newWindow1l 调用 方法 来 控制 新 窗口 。open() 方 法 有 3 个 参数 ， 第 
一 个 参数 是 要 打开 的 页 面 的 URL， 当 新 窗口 与 主 窗口 在 同一 目录 下 时 ， 直 接 写 文件 名 即 可 ， 如 上 述 代 
码 第 1 行 。 当 新 窗口 与 主 窗口 不 在 同一 目录 下 时 ， 则 写 新 窗口 的 相对 路 径 ， 如 代码 第 2 行 。 当 然 ， 新 
窗口 也 可 以 是 绝对 路 径 或 者 是 http 地 址 ， 如 第 3 个 示例 。 第 2 个 参数 是 新 窗口 的 名 称 ， 如 果 打开 新 窗 
口 时 为 室 ， 之 后 还 可 通过 window.name 设置 。 其 中 第 3 个 参数 是 窗口 风格 的 设置 。 

close() 方 法 是 与 open() 方 法 对 应 的 ， 来 关闭 窗口 。 需 要 关闭 哪个 窗口 就 通过 哪个 窗口 的 引用 调用 
close() 方 法 。 在 调用 close0 方 法 前 一 般 都 会 先 检查 窗口 是 否 被 打开 ， 不 然 可 能 会 引起 不 必要 的 错误 。 
口 alert() 方 法 : 弹出 一 个 警告 对 话 框 显示 参数 。 单 击 对 话 框 中 的 “确定 ”按钮 就 可 退出 对 话 框 。 
这 是 一 个 简单 的 例子 : 
alert(" 北 京 2008Olympic! One World，One Dream! "); 


这 个 方法 在 调试 脚本 程序 时 比较 有 用 ， 有 点 类 似 于 其 他 编程 语言 中 的 打印 语句 。 


全 注意 : 完整 的 引用 格式 是 “window.alert( 字 符 串 );”, 但 是 对 于 对 话 框 窗口 都 不 引用 window， 


而 直接 使 用 方法 ， 这 样 简单 一 些 。 


二 
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口 ”confirm() 方 法 : 显示 一 个 具有 OK 和 Cancel 按钮 的 对 话 框 ， 根 据 用 户 的 选择 分 别 返回 true 或 
者 false， 程 序 根据 这 个 返回 值 进行 不 同 的 处 理 。 例 如 : 


var answer=confirm("Are you access the website?"); 
if(lanswer) 


上 

location.href="http://www.sohu.com"; // 跳 转 到 http://www.sohu.com 

} 

当 用 户 单 击 “ 确 定 ” 按 钮 时 就 跳 转 到 http://www.sohu.com。 这 个 方法 可 以 用 在 访问 可 能 存在 不 安 

全 因素 的 网 站 时 ， 提 示 用 户 选择 继续 与 否 。 

口 “prompt(0 方 法 : 显示 一 个 用 户 可 以 输入 信息 的 对 话 框 ， 并 返回 用 户 输入 的 内 容 。 第 1 个 参数 是 
提示 信息 ， 以 字符 串 形式 表达 。 第 2 个 参数 是 输入 信息 的 默认 值 ， 可 以 提供 输入 信息 的 样本 。 
例如 : 

var answer=prompt("what is your name?","™"); 

if(answer) 


{ 
alert("Hello!"+answer+",WELCOME!"); 
} 


下 面 将 上 述 这 些 使 用 方法 整合 在 同一 个 页 面 中 ， 这 样 ， 页 面 将 展示 出 独特 的 魅力 ， 如 程序 14.5 的 
window 对 象 页 面 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 14 章 \14-5 ”使 用 window 对 象 方法 的 主页 面 .html】 

【实例 14-5】 使 用 window 对 象 方法 的 主页 面 ， 其 源码 展示 如 下 : 


程序 14.5 ”使 用 window 对 象 方法 的 主页 面 .html 


01 <script language="javascript"> 

02 Var pop= window.open 

03 ("child.html","pop","width=255,height=235,resizable=1,scrollbars=auto") 
04 pop.setTimeout("close()",2*5000);”// 打 开 子 页 面 child.html 

05 function method() /此 方法 展示 confirm 的 用 法 

06 { 

07 alert(" 北 京 2008Olympic! One World，One Dream! "); 

08 var answer=confirm("Do you want to see news about 2008Olympic?"); 
09 if(answer) 

10 { 

11 Var yourName=prompt("what is your name?","™"); 

12 if(yourName) 

13 { 

14 alert("Hello"+yourName+",WELCOMEI”): 

15 } 

16 } 

17 setlnterval("changeWindow()",2000); /每 隔 2 秒 调用 方法 changeWindow() 
18 } 
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19 function changeWindow() 

20 { 

21 window.resizeBy(-10,-10); /改变 窗口 大 小 
22 bh 

23 </script> 

24 <body bgcolor="white" onload="method()"> 

25 <H1>window 方法 示例 </H1> 

26 <H2> 子 窗口 child.html 在 打开 10 秒 钟 后 就 关闭 ! </H2> 
27 </body> 


【本 节 示 例 参考 ， 资 料 光盘 \ 第 14 章 \14-6 child.html】 
【实例 14-6】 使 用 window 对 象 方法 的 子 页 面 ， 其 源码 展示 如 下 : 
程序 14.6 child.html 


01 <html> 

02 <body> 

03 <center> 

04 <font color="red"><H1> 我 10 秒 钟 后 就 关闭 ， 珍 惜 我 噢 1</h1></font> 
05 </center> 

06 </body> 

07 </html> 


【运行 程序 】 上 面 程序 14.5 包含 使 用 window 对 象 方法 的 主页 面 ， 程 序 14.6 是 使 用 window 对 象 
方法 的 子 页 面 ， 这 两 段 代 码 共同 完成 了 这 个 功能 。 当 浏览 者 打开 这 个 页 面 时 ， 首 先 出 现 的 是 如 图 14.7 
所 示 的 页 面 。 

在 载 入 页 面 时 弹出 警告 对 话 框 “ 北 京 2008Olympic! One World，One Dream! ”， 单 击 “ 确 定 ” 
按钮 后 ， 显 示 效 果 如 图 14.8 所 示 。 


window 方 法 示例 
子 窗口 child. html 在 打开 10 秒 钟 后 就 关闭 ! 


window 方 法 示例 
子 窗口 child. html 在 打开 10 秒 钟 后 就 关闭 ! 


图 14.7 打开 windowMethod html 的 效果 14.8 ”确认 对 话 框 的 显示 效果 
弹出 确认 对 话 框 , 显示 提示 信息 “Do you want to see news about 2008Olympic?”。 当 浏览 者 单 击 “ 确 

定 ”按钮 后 ， 显 示 效 果 如 图 14.9 所 示 。 
【深入 学 习 】 如 果 在 确认 对 话 框 中 单 击 “ 确 定 ” 按 钮 ， 则 弹出 可 以 输入 信息 的 对 话 框 ， 提 示 “what 


ms 
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is your name?”。 如 果 输 入 不 为 室 ， 则 通过 对 话 框 显示 用 户 的 输入 信息 。 例 如 ， 在 文本 框 中 输入 字符 串 
“Zhang Huiji”， 单 击 “确定 ”按钮 ， 显 示 效 果 如 图 14.10 所 示 。 


ribute2- htal =- -|- [= |X 


- 于 |- 基 c- x | 名 P| 
window 方 法 示例 window 方 法 示例 
子 窗口 child. html 在 打开 10 秒 钟 后 就 关闭 ! 子 窗口 child. html 在 打开 10 秘 钟 后 就 关闭 ! 


14.9 可 以 输入 信息 的 对 话 框 图 14.10 显示 文本 框 中 输入 的 字符 串 


单 击 “ 确 定 ”按钮 后 ， 窗 口 每 隔 2 秒 在 水 平和 垂直 方向 均 缩 小 10px。 直 到 浏览 器 客户 区 完全 消失 
后 ， 如 图 14.11 所 示 。 


容 家 国 cveaaawawam 


window 方 法 示例 


子 窗口 child. html 在 打开 10 秒 钟 后 就 
关闭 ! 


图 14.11 窗口 逐渐 减 小 效果 


从 图 14.11 中 可 以 看 到 , 窗口 中 的 字体 相对 于 窗口 来 说 逐渐 变 大 , 这 就 是 由 于 窗口 逐渐 减 小 的 缘故 。 
此 外 ， 在 打开 主页 面 窗口 的 同时 ， 也 自动 打开 子 页 面 窗 口 ， 这 个 窗口 存在 10 秒 后 也 会 自动 关闭 。 
14.4.3 事件 

在 操作 浏览 器 时 ， 大 多 数 动作 都 是 通过 鼠标 操作 引起 的 ， 另 一 些 通过 散 击 键盘 引起 ， 因 为 鼠标 和 
键盘 是 日 常生 活 中 最 常用 的 输入 设备 。 那 么 用 户 与 浏览 器 交互 怎么 实现 ? 输入 设备 引起 的 事件 怎么 处 
理 ? 什么 时 候 处 理 ? 这 就 要 求助 于 事件 和 事件 处 理 程序 了 。window 对 象 的 事件 是 最 令 人 入 迷 的 部 分 之 
一 。 没 有 事件 处 理 程序 就 会 显得 死板 ， 不 够 灵活 。 

window 对 象 的 事件 处 理 程序 要 放 在 <body> 标 签 的 时 间 属 性 设置 中 ， 例 如 : 

onload="window_onload() 

onload 就 是 一 个 事件 处 理 程序 。 类 似 这 样 的 事件 很 多 ， 通 过 一 系列 的 整合 ， 可 以 实现 很 多 实用 的 
功能 ， 如 程序 14.7 提交 注册 号 的 页 面 。 
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【本 节 示 例 参考 : 资料 光盘 \ 第 14 章 \14-7 window 对 象 的 事件 .html】 
【实例 14-7】window 对 象 的 事件 ， 其 源码 展示 如 下 : 


程序 14.7 window 对 象 的 事件 .html 


<script language="javascript"> 
var pop; 
function window_onload() /此 函数 打开 子 窗口 child.html 
ul 
pop= 
Window.open("child.html","pop","width=255,height=235,resizable=1,scrollbars=auto" ); 
} 
function window_onkeypress(){ 


if(window.event.keyCode==27) // 按 Esc 键 退出 页 面 
window.close(); 
else 
alert(window.event.keyCode); /显示 ASCII 码 
} 
function checkNum()f 
nNum.value="031268"; // 初 始 号 码 设 为 031268 
function window_onclick(X{ 
alert(" 提 交 成 功 "); /触发 后 弹出 提交 成 功 
} 
function child_close(}{ 
pop.close(); 
} 
</script> 


<body onload="window_onload()" onkeypress="window_onkeypress();" 
onbeforeunload="window.event.returnValue=' 子 页 面 同时 也 会 被 关闭 " 
onunload="child_close()"> 
你 的 编号 : <input type=text name=num onfocus="checkNum()"><br> 
<input type=submit name=submit1 value=" 递 交 " onclick="window_onclick()"> 
</body> 


注意 : open 函数 中 的 child.html 文 件 是 一 个 已 存在 文件 , 内容 无 所 谓 ,此 处 只 是 为 检查 onload 


【运行 程序 】 上 述 代码 实现 的 功能 过 程 是 ， 在 页 面 载 入 打开 后 ， 如 图 14.12 所 示 。 打 开 主 页 面 
后 ， 触 发 onload 事件 打开 子 窗口 ， 当 鼠标 单 击 文本 框 时 触发 onfocus 事件 ， 文 本 框 中 自动 显示 
“031268”。 然 后 单 击 “递交 ”按钮 ， 触 发 onclick 事件 , 弹出 警告 框 显示 “提交 成 功 ”， 如 图 14.13 
所 示 。 
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N14.14-14.17windowEventhtml - windowsInrere |- [DX 
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息 EA14\U14\14.14-14.17windowEventhtml 


图 14.12 ”windowEvent.html 显示 效果 图 14.13 触发 onfocus 和 onclick 事件 的 效果 


【深入 学 习 】 这 个 页 面 还 有 一 个 有 意思 的 功能 是 ， 如 果 浏 览 者 单 击 其 他 任意 键 弹出 对 话 框 ， 页 面 
将 显示 其 Unicode 码 ， 如 图 14.14 所 示 ， 如 按 下 键盘 上 的 G 键 。 

单 击 “ 确 定 ” 按 钮 后 ， 如 果 用 户 关闭 此 窗口 ， 将 触发 onbeforeunload 事件 ， 弹 出 确认 消息 ， 如 
图 14.15 所 示 。 如 果 单 击 “ 确 定 ” 按 钮 后 , 触发 onunload 事件 , 在 主 窗口 关闭 的 同时 也 关闭 子 页 面 。 
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你 的 编号 : |031258 
国 


三 半 。 说 明 : 通过 这 个 例子 读者 可 以 了 解 window 对 象 事件 。 当 然 ，window 对 象 事件 有 很 多 ， 读 
者 可 以 参考 更 多 书籍 。 


14.5 document 对 象 


document 对 象 是 window 对 象 的 一 个 对 象 属性 ， 代 表 浏 览 器 窗口 中 装载 的 整个 HTML 文档 。 文 档 
中 的 每 个 HTML 元 素 都 对 应 着 JavaScript 对 象 。 设 计 者 要 结合 HTML 标签 和 JavaScript 产生 最 佳 效 果 。 
因为 document 代表 整个 HTML 文档 , 是 其 他 HIML 元 素 的 根 节 点 , 其 他 节点 可 以 通过 document 引用 。 
document 的 属性 和 方法 一 般 用 来 设置 页 面 文档 的 外 观 和 内 容 。 
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14.5.1 document 对 象 属性 


document 对 象 属性 实现 的 功能 使 用 HTML 中 的 标签 也 可 以 实现 ， 从 其 表面 效果 来 看 是 差不多 的 ， 
但 是 与 事件 处 理 程序 结合 使 用 时 就 体现 出 了 两 者 的 不 同 。 常 用 的 属性 如 表 14.2 所 示 。 


表 14.2 document 对 象 的 属性 


属 性 说 明 
title 设置 文档 标题 
bgColor 设置 页 面 背景 色 
feColor 设置 前 景色 ， 即 文本 颜色 
linkColor 未 访问 过 的 链接 颜色 
alinkColor 在 超 链接 上 单 击 鼠 标 时 的 颜色 
VlinkColor 已 经 访问 过 的 链接 颜色 
URL 设置 URL 属 性 从 而 在 同一 窗口 打开 另 一 网 页 
fileCreatedDate 以 字符 串 形式 返回 文件 建立 日 期 
fileModifiedDate 以 字符 串 格式 返回 文件 修改 日 期 
filesize 返回 网 页 文档 的 大 小 
cookie 设置 和 返回 cookie 值 
charset 返回 网 页 文档 所 使 用 的 字符 编码 方式 


14.5.2 ” document 对 象 方法 


关闭 open0 方 法 打开 的 输出 流 
向 HTMI 文 档 中 写 入 内 容 
与 write0 方 法 相 比 ， 每 次 写 完 内 容 之 后 多 一 个 换行 符 


返回 文档 中 任何 元 素 (ID 属性 具有 唯一 性 ) 的 引用 
getElementsByName() 返回 指定 name 属 性 值 的 对 象 的 引用 数组 
getElementsByTagName() 返回 指定 标签 名 的 对 象 的 引用 数组 
a 产生 一 个 代表 某 个 HIML 元 素 的 对 象 ， 而 后 使 用 父 元 素 的 方法 来 修改 文档 的 内 


容 ( 如 appendChild0 方 法 ) 
14.5.3 ”document 对象 事件 


document 对 象 常 用 的 事件 处 理 程 序 就 是 window 对 象 中 介绍 的 通用 事件 ， 此 处 不 再 袭 述 。 下 面 通 
过 一 个 document 对 象 的 例子 来 演示 其 属性 和 方法 的 使 用 。 
【本 节 示 例 参考 : 资料 光盘 \ 第 14 章 \14-8 document 对象 的 属性 和 方法 document.html】 


【实例 14-8】document 对 象 的 属性 和 方法 document.html， 其 源码 如 程序 14.8 所 示 。 


Ns 
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程序 14.8 document.html 


<script language="javascript"> 
function setDocument() 


{ 
document.bgColor="white"; // 设 置 背景 颜色 为 白色 
document.fgColor="black"; // 设 置 字体 颜色 为 黑色 
document.alinkColor="red"; 
document.vlinkColor="green"; 
document.linkColor="yellow"; 
} 
function create_Element() 
{ 
var area = document.getElementByld("area"); // 通 过 "area" 取 得 对 象 
var element = document.createElement("input"); /动态 创建 一 个 对 象 
element.type = "radio"; // 对 象 类 型 是 单 选 按钮 
var obj = area.appendChild(element); // 将 对 象 插入 到 area 中 
obj.checked = true; /| 单 选 按钮 默认 状态 是 选中 状态 
</script> 


<body onload="setDocument()"> 
<H1>document 对 象 的 属性 和 方法 示例 </H1><br> 
<font color=red onclick="javascript:create_Element()"> 点 一 下 这 里 </font><br><br> 
<a href="newWindow.html"> 进 入 新 窗口 </a><br> 
<div id="area"></div> 
</body> 


这 段 代码 中 ，document 方法 使 用 到 的 分 别 是 getElementById0 和 createElement()。getElementById() 
是 指 返 回 文档 中 任何 元 素 (ID 属性 具有 唯一 性 ) 的 引用 。 所 以 在 代码 中 , 表示 将 获得 area 层 中 的 元 素 。 
createElementO 是 指 产生 一 个 代表 某 个 HTML 元 素 的 对 象 ， 而 后 使 用 父 元 素 的 方法 来 修改 文档 的 内 容 ， 
同样 ， 如 appendChild() 方 法 也 是 这 样 。 
【本 节 示 例 参考 : 资料 光盘 \ 第 14 章 \14-9 newWindow.html】 


【实例 14-9】 链 接 窗 口 newWindow.html， 其 源码 展示 如 下 : 


05 
06 


程序 14.9 newWindow.html 


<script language="javascript"> 
document.write("Hello! 欢 迎 来 到 新 窗口 "); 
</script> 

<body> 

<H1> 这 是 新 窗口 <H1> 

</body> 


【运行 程序 】 上 面 的 程序 14.8 包括 document.html 和 newWindow.html 两 个 文件 。 图 14.16 显示 了 
document.html 打开 的 效果 ， 有 标题 、 红 色 文 本 和 超 链接 。 在 这 里 ， 通 过 document 方法 设置 了 网 页 文档 
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的 背景 颜色 、 字 体 颜色 、 超 链接 等 属性 信息 ， 而 不 是 通过 HTML 语言 。 

单 击 “ 点 一 下 这 里 ”文本 ， 在 “进入 新 窗口 ” 超 链接 下 出 现 一 个 已 选 定 的 单 选 按钮 ， 如 单 击 6 次 
“点 一 下 这 里 ”就 显示 6 个 单 选 按钮 ， 如 图 14.17 所 示 ， 这 由 代码 第 14 行 和 15 行 实现 。 接 下 来 测试 超 
链接 的 功能 ， 单 击 “ 进 入 新 窗口 ” 超 链接 ， 页 面 转 入 新 窗口 ， 如 图 14.18 所 示 。 另 外 ， 还 可 以 看 到 超 链 
接 颜色 在 未 访问 时 、 已 访问 过 和 选 定时 的 不 同 。 


可 了 


ET 


出 Ue er Pr 


DO. Va 
SHE MWD BY) CEA IAD Me x Om 
计生 。EALLALLE1420document ml 


document 对 象 的 属性 和 方 ; 法 示例 


点 一 下 这 里 


RD MWD BW) CEAL IND MW x Om 
安生。 着 ELALAN415.1420doaumentjan 


document 对 象 的 属性 和 方法 示例 


过 和 新富 吕 


图 14.16 documenthtml 显示 效果 14.17 单 击 “ 点 一 下 这 里 ”的 显示 效果 


£2 EA14\14WnewWindow.himl - Windows Inte-.E |@| 区 
GO- Brn x| uw soorch | 
HD WD ER EA TR WO 

室 收 若 关 | 医 EVa4newWndowhim| 


Hello! 欢 j 迎 宁 到 扬 窗口 


这 是 新 窗口 


图 14.18 newWindow.html 显示 效果 
【深入 学 习 】JavaScript 中 还 有 很 多 其 他 对 象 。 事实 上 , HTML 中 的 每 个 元 素 基 本 上 都 在 JavaScript 
中 有 相应 的 对 象 。 由 于 本 书 主 要 是 介绍 HTML 和 CSS，JavaScript 部 分 是 想 让 初学 者 了 解 动态 页 面 的 
实现 机 理 、JavaScript 的 基本 语法 、 动 态 页 面 一 般 的 编写 方法 ， 以 配合 HTML 和 CSS 设计 出 生动 活泼 
的 页 面 来 。 在 实际 运用 的 设计 中 ， 这 些小 例子 肯定 是 无 法 满足 设计 需求 的 ， 开 发 者 需要 将 这 些 基 本 的 
知识 组 合 起 来 ， 灵 活 地 应 用 才能 达到 令 人 满意 的 特效 。 


14.6 案例 : 一 个 运用 JavaScript 实现 的 动态 页 面 


通过 前 面 的 学 习 已 经 知道 ，JavaScript 可 以 用 来 实现 表单 验证 ， 例 如， 登录 某 个 论坛 时 需要 填写 用 
户 名 和 密码 ， 还 可 以 响应 鼠标 单 击 事件 、 键 盘 敲 击 事 件 、 窗 口 移动 事件 、 窗 口 大 小 改变 事件 、 文 档 载 
入 事件 和 文档 卸载 事件 等 。 

这 就 是 JavaScript 能 创建 动态 HTML 页 面 ， 从 而 实现 用 户 与 浏览 器 交互 的 原因 。 使 得 在 有 限 的 页 
面 中 展现 更 多 的 内 容 ， 使 网 站 更 加 生动 ， 吸 引 更 多 的 浏览 者 ， 给 用 户 良好 的 体验 。 在 了 解 了 HTML、 
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CSS 和 JavaScript 后 ， 就 可 以 动手 设计 一 个 漂亮 的 页 面 了 ， 这 个 漂亮 除了 指 外 观 , 还 有 功能 和 实用 的 感 
觉 。 来 看 实例 吧 ， 在 这 个 例子 中 尽 可 能 地 包含 了 前 面 介绍 的 对 象 及 其 属性 、 方 法 和 事件 。 
【本 节 示 例 参 考 : 资料 光盘 \ 第 14 章 \14-10 JavaScript 实现 的 动态 页 面 goodLogin.html】 


【实例 14-10】JavaScript 实现 的 动态 页 面 goodLogin.html， 其 源码 展示 如 下 : 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
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程序 14.10 ” JavaScript 实现 的 动态 页 面 goodLogin.html 


<html> 


<head> 
<title> 现 在 时 间 是 </title> 
<meta content="text/html; charset=gb2312" http-equiv=Content-Type> 
<script language=JavaScript> 
"在 网 页 标题 上 显示 当前 时 间 */ 
document.title = document.title+new Date(); 
</script> 
</head> 
<body text="Olive" alink=navy vlink=red link=aqua> 
<!- 图 标的 区 域 ， 此 图 标 可 以 在 页 面 上 移动 ， 下 面 有 函数 来 实现 此 效果 --> 
<div id=float_icon style="VISIBILITY:hidden;POSITION:absolute;LEFT=0; TOP=0"> 
<img src="image/2.gif'> 
</div> 
<div align="center"><center> 
<font size="4" ><H1> 轻 松 学 习 JavaScript</H1></font> 
<table border=0 cellpadding=0 cellspacing=0><tr bgcolor="gray"> 
<tr><td> 
<pre><font color="black" size="3"> 
您 希望 设计 出 实用 、 美 观 的 网 页 吗 ? 你 设计 的 网 页 美观 吗 ? 学 
习 了 JavaScript， 您 就 可 以 肯定 的 回答 了 。 
</font></pre> 
</td></tr> 
</table><br><br> 
<H2> 下 面 是 一 个 用 JavaScript 实现 的 登录 例子 </h2> 


<!- 制 作 一 个 表单 一 > 
<form name=form1 action="javascript:login()" method=post> 
用 户 名 : <input type=text name=user onkeypress="checkChar(this.form)"><br> 
密码 : <input type=password name=psw onfocus="checkNamelthis.form)"><br> 
<input type=submit name=submit1 value=" 提 交 "> 
<input type=reset name=cancel value=" 取 消 "> 
</form> 
</center></div> 
</body> 
</html> 


程序 14.10 是 本 案例 的 主体 框架 , 设置 该 网 页 的 样式 和 结构 。 在 网 页 头 部 实现 了 显示 当前 时 间 的 功 
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能 。 其 中 ， 登 录 验 证 函数 checkChar、checkName 和 login 则 在 下 面 的 JavaScript 代码 中 实现 。 另 外 ， 图 
标 在 窗 体 中 移动 的 功能 也 由 程序 14.11 实现 。 
【本 节 示 例 参考 : 资料 光盘 \ 第 14 章 \14-11 登录 验证 代码 .html】 


【实例 14-11】 和 登录 验证 代码 ， 其 源码 展示 如 下 : 
程序 14.11 登录 验证 代码 .html 


01 <scriptlanguage="javascript"> 


02 /下 面 的 代码 实现 当 图 标 碰 到 窗口 边界 时 ， 改 变 图 标 移动 的 方向 。 

03 如 果 图 标 左边 位 置 加 上 图 标 宽度 大 于 浏览 器 窗口 宽度 ， 就 表示 图 标 

04 已 磁 到 窗口 右边 界 */ 

05 var dirX=1,dirY=1; 

06 var xPos=0;yPos=0; 

07 float icon.style.top=0; 

08 document.body.all.float_icon.style.left=0 

09 document.body.all("float_icon").style.visibility="visible"; // 设 定 图 标 可 见 

10 window.setinterval("movelcon()",100); /每 隔 0.1 秒 移动 一 次 位 置 

11 /此 函数 定义 图 标的 轨迹 

12 function movelcon(X{ 

13 XPos+=2*dirX; 

14 yPos+=2*dirY; 

15 float icon.style.top=yPos; 

16 float_icon.style.left=xPos; 

17 if(xPos<=0||xPos+float_icon.offsetWidth>=document.body.clientWidth) 
18 dirX=-dirX; /如 果 图 标的 横 坐 标 超 出 窗口 边界 ， 则 图 标 向 相反 方向 移动 
19 

20 if(yPos<=0|lyPos+float_icon.offsetHeight>=document.body.clientHeight) 

21 dirY=-dirY; // 如 果 图 标的 纵 坐 标 超出 窗口 边界 ， 则 图 标 向 相反 方向 移动 
本 2 } 

23 /检查 用 户 名 必须 是 a-z 的 字母 */ 

24 function checkChar(frm)f 


25 if(window.event.keyCode>'z'.charCodeAt(0)| 
26 window.event.keyCode<'a'.charCodeAt(0)) 


区 汪 { 

28 window.eventreturnValue=0; /取消 浏览 器 的 默认 事件 
29 alert(" 必 须 输入 a-z 的 字母 "); 

30 } 

31 和 

32 让 检查 必须 先 输入 用 户 名 ， 再 输入 密码 */ 

33 function checkName(frmX{ 

34 if(frm.user.value=="") // 如 果 用 户 名 为 空 ， 则 弹出 提示 信息 
35 { 

36 alert(" 你 必须 先 输入 用 户 名 "); 

37 frm.user.focus(); 

38 } 
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39 } 
40 A 检测 是 否 登 录 成 功 */ 

41 function login(X{ 

42 让 如 果 用 户 名 为 bupt， 密 码 为 bupt， 则 登录 成 功 */ 

43 if((form1.user.value=="bupt")&&(form1.psw.value=="bupt")) 
94 { 

45 alert(" 成 功 "); 

46 ) 

47 else 

48 { 

49 alert(" 失 败 "); 

50 

51 1 

52 </script> 


【运行 程序 】 在 运行 时 ， 将 程序 14.11 放 在 程序 14.10 的 任意 部 分 都 可 以 ， 这 体现 了 JavaScript 的 
一 个 特点 , 因为 JavaScript 代码 是 放 在 <script></scripf> 标 签 对 之 间 ,， 因 此 不 管 放 在 什么 位 置 都 具有 较 好 
的 可 读 性 。 代 码 整 合 后 ， 使 用 浏览 器 打开 页 面 ， 如 图 14.19 所 示 。 
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图 14.19 ”goodLogin.html 显示 效果 


【深入 学 习 】 图 14.19 中 的 标题 上 显示 着 当前 时 间 ， 有 供用 户 填写 用 户 名 和 密码 的 文本 框 。 还 有 一 
张 笑脸 的 GIF 图 像 浮 动 在 文字 上 方 ， 并 且 在 各 个 窗口 间 不 停 移动 。 当 碰 到 窗口 边界 时 ， 图 像 会 改变 移 
动 的 方向 ， 如 同 碰 到 墙壁 被 弹 开 的 一 样 。 

在 这 个 页 面 中 ， 如 果 用 户 在 “用 户 名 ”文本 框 中 输入 由 字母 组 成 的 名 字 是 可 以 的 ， 但 是 当 输 入 数 
字 时 就 弹出 警告 对 话 框 提 示 “ 必 须 输入 a-z 的 字母 ”， 这 是 通过 触发 onkeypress 事件 来 实现 的 。 当 事件 
被 触发 时 调用 checkChar0 函 数 检查 按键 是 否 是 字母 ， 如 图 14.20 所 示 。 

而 如 果 用 户 将 “用 户 名 ”文本 框 空 着 ， 先 填 密 码 ， 会 提示 用 户 “ 你 必须 先 输入 用 户 名 ”， 这 是 通 
过 触发 onfocus 事件 来 实现 的 。 当 事件 被 触发 时 调用 checkName0O) 用 户 名 的 值 是 否 为 空 ， 如 果 为 空 ， 则 
提示 警告 信息 , 并 且 “ 用 户 名 ”文本 框 将 得 到 焦点 , 此 时 系统 提示 必须 先 输入 用 户 名 , 如 图 14.21 所 示 。 

再 次 单 击 “ 确 定 ”按钮 ，“ 用 户 名 ”文本 框 会 自动 获得 焦点 。 那 么 如 果 在 程序 14.11 中 输入 正确 的 
登录 名 和 密码 。 这 里 事先 将 登录 用 户 名 设置 为 bupt， 密 码 是 bupt， 当 页 面 验证 两 者 都 正确 时 则 弹出 对 
话 框 提示 成 功 ， 如 图 14.22 所 示 ， 否 则 提示 失败 。 
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图 14.21 系统 提示 必须 先 输入 用 户 名 图 14.22 用 户 名 和 密码 都 为 bupt 

在 编写 JavaScript 程序 时 要 特别 认真 ， 尽量 避免 函数 名 错误 或 者 函数 名 缺失 等 不 必要 的 错误 , 尤其 

是 在 用 记事 本 编写 时 ， 本 身 没 有 语法 检查 的 功能 ， 只 能 在 浏览 器 解释 时 返回 错误 。 但 是 浏览 器 并 不 能 
告 JavaScript 中 的 所 有 错误 。 

例如 ， 在 程序 14.10 中 ， 如 果 将 : 

<input type=text name=user onkeypress="checkChar(this.form)"> 

写成 : 

<input type=text name=user onkeypress="checkChar"> 

结果 就 比较 糟糕 。 此 时 ， 在 “用 户 名 ”文本 框 中 输入 数字 时 ， 浏 览 器 不 会 报告 错误 ， 这 就 违背 了 

设计 时 的 需求 。 对 于 这 些 不 易 发 现 的 错误 ， 在 调试 的 过 程 中 可 以 仿照 其 他 编程 语言 中 添加 打印 语句 的 
方法 ， 在 JavaScript 中 添加 alert0 语 句 来 找到 错误 的 源头 。 


说 明 : 对 于 经 验 不 足 的 网 页 设计 者 来 说 ， 这 种 笨 方 法 是 很 有 效 的 。 当 然 ， 在 开发 者 对 网 页 


编程 各 为 典 秋 时， 就 会 有 敏锐 的 直觉 了 。 大 多 数 情况 下 ， 在 无 法 得 到 预想 结果 时 ， 熟 练 的 程序 员 会 知道 
该 去 查看 哪 块 代码 ， 这 就 是 “ 熟 能 生 巧 ”。 所 以 多 多 练习 是 必需 的 。 
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14.7 小 结 


本 章 对 于 JavaScript 的 探讨 仅 停留 在 帮助 读者 从 HTML 到 JavaScript 过 渡 的 层面 , 是 为 了 帮助 读者 
今后 学 习 JavaScript 做 一 个 入 门 的 启发 。 本 章 介绍 的 知识 点 有 : 
对 象 和 DOM 的 概念 。 
JavaScript 的 数组 的 定义 和 使 用 方法 。 
JavaScript 中 常用 的 3 个 内 部 对 和 象 为 Math 对 象 、Date 对 象 和 String 对 象 。 
处 在 文档 对 象 模型 的 最 高 层 ， 代 表 浏 览 器 的 整个 窗口 的 window 对 象 及 其 属性 、 方 法 和 事件 ， 
这 部 分 用 处 很 大 ， 所 以 花 了 很 大 篇 幅 来 介绍 。 

口 最 后 在 案例 中 介绍 了 一 个 实用 的 文档 对 象 一 一 document 对 象 ， 及 其 属性 、 方 法 和 事件 。 

在 第 15 章 中 ， 将 介绍 几 种 常见 的 帮助 页 面 设 计 人 员工 作 的 得 力 助手 一 一 可 视 化 编辑 软件 。 设 计 人 
员 利 用 这 些 工具 ， 可 以 实现 更 快 的 工作 效率 和 更 好 的 设计 效果 。 
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第 15 章 了 解 剃 作 页 面 的 工具 


制作 页 面 最 基本 的 工具 就 是 记事 本 ， 如 果 设 计 者 愿意 ， 完 全 可 以 用 记事 本 做 出 任何 页 面 。 事 实 上 ， 
很 多 人 也 是 这 样 做 的 。 但 是 为 了 提高 设计 者 的 工作 效率 ， 出 现 了 很 多 编辑 页 面 的 软件 ， 闻 名 遐 途 且 运 
用 最 为 广泛 的 是 Adobe 公司 的 一 系列 产品 ， 本 章 将 介绍 这 些 主流 的 网 页 编辑 工具 。 本 章 的 主要 知识 点 
如 下 。 

口 使 用 Dreamweaver 工具 实现 页 面 开发 。 

口 了 解 Photoshop。 

口 了 解 Flash 视频 文件 。 

口 了 解 Flash 工具 和 它 的 一 些 使 用 。 


15.1 ”可视化 编辑 页 面 工具 : Dreamweaver 


Dreamweaver 是 美国 MACROMEDIA 公司 开发 的 集 网 页 制作 和 管理 网 站 于 一 体 的 所 见 即 所 得 网 页 
编辑 器 。 强 大 全 面 的 功能 使 之 受到 许多 人 的 喜爱 ， 利 用 它 可 以 提高 制作 页 面 的 工作 效率 。 

Dreamweaver 软件 的 历史 说 来 已 久 , 在 早年 版 本 的 Dreamweaver 中 , 制作 页 面 虽 然 已 经 是 基于 CSS 
样式 表 的 布局 ， 但 是 考虑 到 一 些 老 用 户 ， 而 且 几 年 前 的 设计 页 面 思路 并 没有 如 今天 一 样 从 “HTML 制 
作 框架 、CSS 样式 表 来 修饰 ，JavaScript 来 发 挥 页 面 的 动态 效果 ”这 样 的 角度 出 发 ， 所 以 多 少 还 是 有 照 
顾 早期 表格 框架 来 布局 页 面 的 思路 。 

而 在 最 近 发 行 的 Dreamweaver CS3.0 版 本 中 ， 带 来 了 很 大 的 改变 。 最 明显 的 改变 是 设计 页 面 的 方 
式 是 以 DIV+CSS 的 思路 为 出 发 点 ， 无 疑 新 版 本 的 Dreamweaver CS3.0 将 会 给 设计 者 带 来 更 多 的 易 操 
作 性 。 


15.1.1 了 解 Dreamweaver 的 界面 


当 使 用 者 第 一 次 打开 Dreamweaver 时 ， 软 件 会 要 求 使 用 者 选择 “创建 一 个 新 页 面 ”。 这 时 软件 会 
给 出 多 种 不 同类 型 页 面 的 选择 项 ， 如 PHP、HTML 和 XML 等 。 事 实 上 ， 对 于 初学 者 来 说 ， 设 计 一 个 
完整 的 页 面 ， 可 以 从 选择 HTML 开始 。 一 个 基本 的 Dreamweaver 界面 样式 如 图 15.1 所 示 。 

大 体 上 整个 Dreamweaver 软件 主要 可 以 分 为 菜单 栏 、 工 具 栏 、 预 览 区 、 代 码 区 、 属 性 修改 和 侧 栏 。 
从 图 15.1 中 可 以 很 容易 地 注意 到 最 显眼 的 两 个 部 分 ， 即 预览 区 和 代码 区 。Dreamweaver 最 大 的 特色 就 
在 于 当 设 计 者 在 代码 区 域内 写 入 完整 正确 的 HTML 代码 时 ， 在 预览 区 中 将 可 以 看 到 页 面 的 预览 样式 。 

在 编写 代码 时 ，Dreamweaver 会 选择 不 同 的 颜色 来 表示 不 同 的 功能 作用 的 代码 ， 而 且 软 件 中 预 设 
了 几乎 所 有 的 HTML 标签 和 CSS 样式 表 的 属性 。 所 以 , 编写 代码 时 会 自动 生成 可 供 选 择 的 属性 ， 这 对 
设计 者 提高 编写 速度 有 很 大 的 帮助 。 


图 15.1 _ Dreamweaver CS3.0 界面 


虽然 在 预览 区 中 能 看 到 页 面 的 预览 效果 ， 但 由 于 事实 上 页 面 在 不 同 的 浏览 器 中 效果 都 并 非 一 样 ， 
所 以 有 时 设计 者 还 是 不 得 不 在 浏览 器 中 查看 最 终 的 效果 。 

当选 中 页 面 中 某 一 个 页 面 对 象 ， 如 文本 、 图 像 等 时 ， 在 属性 修改 编辑 栏 中 ， 图 15.1 中 最 下 部 分 ， 
虽然 这 里 可 以 方便 地 通过 预 设 的 属性 项 目 进行 对 页 面 内 容 编辑 ， 但 并 不 是 一 个 制作 页 面 的 好 方法 ， 最 
好 的 方法 依然 是 通过 自己 手动 编写 CSS 样式 表 来 修饰 页 面 的 内 容 。 而 通过 属性 面板 修改 页 面 对 象 时 ， 
会 很 容易 出 现 难以 意料 的 繁琐 代码 ， 这 会 让 整个 页 面 源码 显得 很 糟糕 。 

界面 的 侧 栏 中 有 一 些 属性 修改 的 面板 ， 这 个 位 置 中 有 一 个 非常 显眼 的 部 分 : CSS 样式 表 属 性 编辑 
面板 ， 如 图 15.1 右 侧 所 示 。 在 这 个 窗口 中 ， 设 计 者 可 以 方便 地 制定 样式 表 ， 如 图 15.2 所 示 。 
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图 15.2 CSS 样式 表 编辑 器 


as 
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在 这 个 编辑 器 中 ， 当 需要 创建 样式 表 时 ， 会 弹出 窗口 选项 ， 如 图 15.2 中 下 方 窗 口 ， 使 用 者 可 以 在 
这 里 方便 地 选择 需要 修改 的 属性 。 这 令 开发 页 面 的 初学 者 也 可 以 很 容易 地 上 手 操 作 。 


说 明 : Dreamweaver 软件 的 使 用 不 是 本 书 的 重点 ， 故 只 做 入 门 介绍 。 有 兴趣 的 读者 可 以 查 


找 一 些 关于 Dreamweaver 的 书籍 参阅 。 


15.1.2 ”Dreamweaver 的 菜单 


和 大 部 分 平时 所 见 的 软件 一 样 ， 就 像 汽 车 总 是 有 些 基本 的 特征 ， 如 4 个 轮子 、 车 头 车 尾 总 是 不 会 
变 的 。 如 图 15.1 中 的 Dreamweaver 界面 ， 项 部 是 菜单 栏 ， 这 在 大 部 分 软件 中 都 是 这 样 。Dreamweaver 
中 主要 的 菜单 介绍 如 下 。 

口 PEile: 文件 ， 在 该 菜单 下 可 以 进行 打开 、 新 建 、 保 存 这 些 基 本 的 操作 ， 同 时 也 有 一 些 导 入 、 导 

出 其 他 素材 等 功能 。 
口 ”Edit: 编辑 ， 在 该 菜单 下 可 以 编辑 对 页 面 的 操作 动作 ， 如 一 些 基本 的 复制 、 删 除 、 粘 贴 等 。 
口 View: 查看 ， 在 该 菜单 下 可 以 对 页 面 的 显示 方式 进行 编辑 ， 如 尺寸 、 网 格 线 这 样 的 功能 来 编 


辑 页 面 布 局 。 

口 Insert: 插入 ， 在 该 菜单 中 可 以 在 页 面 中 插入 不 同 的 页 面 文件 ， 如 图 像 、 表 格 、 超 链接 或 表 
单 等 。 

口 Modify: 修改 ,该 菜单 下 针对 页 面 中 不 同 的 对 象 进行 修改 ， 如 修改 表格 的 行列 属性 、CSS 样 


口 Text: 文本 ,该 菜单 下 可 以 对 文本 进行 专门 的 编辑 ， 如 修改 文本 的 字体 大 小 、 字 体 样式 等 。 
口 Commands: 命令 ， 在 该 菜单 下 可 以 预先 设置 好 一 组 命令 ， 当 对 不 同 对 象 使 用 相同 操作 时 ， 可 
以 无 须 再 次 重复 编辑 。 

Site: 站 点 ， 用 来 链接 整理 服务 器 。 

Window: 视窗 ， 控 制 在 界面 中 打开 不 同 的 窗口 。 

口 Help: 帮助 ， 这 里 可 以 通过 连接 互联 网 查找 一 些 关于 Dreamweaver 的 使 用 资料 。 


口 口 


15.2 神奇 的 “美工 笔 ”: Photoshop 


对 于 前 端 页 面 开 发 者 来 说 ， 当 拥有 布局 页 面 能 力 的 同时 ， 最 好 能 拥有 一 些 编辑 图 像 的 能 力 。 在 诸 
多 图 像 编辑 的 软件 中 ，Photoshop 的 名 声响 彻 业界 ， 设 计 者 常用 的 一 种 方法 是 在 Photoshop 中 做 好 页 面 
的 设计 图 ， 然 后 放 到 Dreamweaver 中 进行 编辑 。 本 节 将 介绍 如 何 使 用 Photoshop 的 基本 功能 。 
15.2.1 了 解 Photoshop 的 界面 


由 于 Photoshop 和 Dreamweaver 现在 同属 于 Adobe 公司 。 所 以 它们 在 界面 上 样式 十 分 类 似 ， 如 
图 15.3 所 示 。 
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图 15.3 Photoshop 界面 


从 界面 上 可 以 看 出 ，Photoshop 基本 上 也 是 具备 菜单 栏 、 工 具 栏 、 工 作 区 域 ， 即 图 中 的 图 像 窗口 和 
侧 栏 。Photoshop 相对 于 Dreamweaver 而 言 ， 并 没有 特别 多 的 选项 。 当 然 ， 这 不 是 说 Photoshop 的 功能 
不 够 强大 ， 实 际 上 它 可 以 做 出 任何 你 能 想象 的 图 像 。 这 里 简单 介绍 一 下 Photoshop 的 菜单 。 

口 文件 : 作用 如 Dreamweaver 软件 ， 实 现 一 些 基 本 的 功能 ， 如 保存 、 打 开 图 像 、 导 入 导出 等 
功能 。 
编辑 : 同样 具备 Dreamweaver 软件 中 菜单 的 编辑 功能 ， 只 是 作用 于 不 同 的 对 象 ， 此 外 ， 还 有 
专门 属于 Photoshop 的 编辑 工具 栏 属 性 的 一 些 功能 。 

图 像 : 可 以 修改 图 像 的 大 小 、 画 布 的 大 小 等 功能 。 

图 层 : 可 以 使 用 于 图 层 的 一 些 编辑 方法 。 图 层 是 Photoshop 中 一 个 重要 的 功能 。 

选择 : 选取 编辑 对 象 。 

滤 镜 : 对 所 选 对 象 进行 效果 编辑 ， 这 是 Photoshop 中 十 分 有 魅力 的 一 项 功能 ， 它 可 以 令 设 计 者 
的 图 像 展 示 出 难以 想象 的 奇特 效果 。 

分 析 : 对 图 像 进 行 测量 工作 。 

视图 : 可 以 选择 如 标尺 、 网 格 等 特殊 工具 来 划分 图 像 中 不 同 的 位 置 。 

窗口 : 选择 在 界面 中 显示 或 者 隐藏 部 分 功能 的 窗口 。 

帮助 : 可 以 通过 互联 网 查找 一 些 关 于 如 何 使 用 Photoshop 的 资料 。 


15.2.2 ”Photoshop 的 实用 技巧 


使 用 Photoshop 时 ， 可 以 通过 工具 来 完成 大 部 分 操作 。 而 在 Photoshop 中 ， 这 些 主 要 的 工具 栏 放 在 
整个 软件 界面 的 左 侧 ， 如 图 15.4 所 示 。 

Photoshop 提供 的 工具 并 不 是 很 多 ， 但 它 能 够 做 出 任何 人 们 可 以 想象 出 来 的 图 像 。Photoshop 编辑 
创建 图 像 完全 可 以 认为 是 一 门 博大 精深 的 艺术 学 科 。 如 图 15.4 所 示 , 其 中 15 号 位 置 的 是 画笔 工具 , 它 
可 以 描绘 出 千姿百态 的 图 像 ; 8 号 位 置 的 是 钢笔 工具 ， 可 以 建立 任何 形状 的 图 像 轮廓 ; 19 号 位 置 的 是 
文字 工具 ， 可 以 在 图 像 中 添加 文本 。 
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图 15.4 ”Photoshop 工具 栏 


说 明 : Photoshop 的 内 容 已 经 超出 了 本 书 的 范畴 ， 这 里 只 做 一 个 简单 的 抛砖引玉 ， 目 的 是 


帮助 初学 者 有 个 简单 的 入 门 概念 。 有 兴趣 的 读者 不 妨 去 查阅 更 多 的 关于 Photoshop 的 书籍 。 


在 很 多 时 候 ， 设 计 者 制作 网 页 时 不 可 能 每 一 个 元 素 都 是 从 零 开始 创新 。 例 如 ， 改 变 一 幅 图 像 的 部 


分 内 容 ， 显 然 不 可 能 重头 再 去 制作 一 幅 基本 差不多 的 图 像 。 而 比 
较 好 的 方法 是 在 原先 图 像 的 基础 上 进行 修改 。 又 如 ， 当 设计 者 只 
需要 一 个 图 像 部 分 内 容 时 ， 只 要 在 素材 上 截取 就 可 以 了 。 

通过 图 15.4 工具 栏 中 的 工具 ， 可 以 对 图 像 进行 一 些 基本 的 
简单 操作 。 这 里 介绍 一 种 很 实用 的 技巧 一 一 截取 图 像 的 技巧 。 下 
面 先 看 如 图 15.5 所 示 的 一 幅 图 像 。 

这 是 一 张 来 自 于 互联 网 的 图 像 , 这 里 希望 有 这 个 “施工 标志 ” 
的 部 分 来 为 已 所 用 ， 让 它 来 点 级 自己 的 页 面 。 那么 ,该 如 何 通 过 
Photoshop 来 实现 呢 ? 

首先 , 在 Photoshop 中 打开 这 张 图 像 。 为 了 截取 这 部 分 图 像 ， 


可 以 使 用 几 种 工具 。 在 图 15.4 中 ，1 号 位 置 的 工具 是 选择 工具 ， 它 


等 。 当 选择 好 局 部 图 像 之 后 ， 可 以 通过 剪 切 或 者 复制 这 部 分 图 像 ， 
存 这 个 图 层 ， 如 图 15.6 所 示 。 


CONSTRUCTIO| 


15.6 ”建立 新 选区 的 “施工 标志 ” 
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15.5 施工 1.png 


可 以 设置 成 矩形 选 框 、 椭 圆 形 选 框 
然后 放 在 新 的 图 层 中 ， 最 后 选择 保 


CSS mati 


此 外 ,还 有 一 种 更 直接 的 方法 ,使 用 工具 栏 中 3 号 位 置 的 截取 工具 ， 它 可 以 直接 将 画布 截取 出 来 ， 
如 图 15.7 所 示 。 


学 说 明 : 如 果 最 终 得 到 的 图 像 大 小 依然 无 法 令 设 计 者 满意 ， 可 以 使 用 Ctrl+T 组 合 键 来 改变 图 
像 的 大 小 。 


这 样 截 选 出 来 的 图 像 另存 为 适合 的 格式 ， 如 :jpg、.png 格式 等 ， 就 可 以 放 在 网 页 中 使 用 了 。 
15.3 网 页 中 的 动画 : Flash 


Flash 是 一 种 文件 ， 这 里 要 提 到 的 也 是 同属 于 Adobe 公司 的 一 款 软件 。 当 然 ， 它 的 作用 就 是 用 来 制 
作 Flash 文件 的 工具 。 但 由 于 现今 Flash 文件 的 应 用 范围 很 广泛 ， 所 以 Flash 软件 也 可 以 说 不 仅 是 制作 
简单 动画 效果 的 Flash 文件 ， 同 时 也 是 可 以 制作 出 精美 动态 页 面 设计 的 软件 。 


15.3.1 认识 Flash 文件 


Flash 最 初 给 人 的 印象 就 是 比 GIF 格式 更 漂亮 一 些 的 动画 。Flash 目前 是 最 为 流行 的 一 种 矢量 动画 
格式 文件 ， 其 优点 在 于 使 用 向 量 运算 ( Vector Graphics ) 的 方式 ， 产 生出 来 的 影片 占用 存储 空间 较 小 。 
Flash 文件 的 格式 后 缀 名 是 .swf， 如 果 需 要 在 页 面 中 加 载 Flash 文件 ， 则 需要 有 特殊 的 播放 器 支持 。 

发 展 至 今 ，Flash 所 能 做 的 已 经 不 再 是 当初 的 一 个 小 小 的 页 面 动画 。 其 结合 ActionScript 语言 的 对 
象 和 流程 控制 , 已 经 完全 可 以 做 到 成 为 可 以 和 用 户 互 动 的 前 端 页 面 。 甚 至 Flash 也 可 以 制作 成 为 简单 的 

口 ” 后 级 名 为 .fla 的 文件 如果 制作 一 个 Flash 动画 ， 只 能 通过 Flash 的 源 文件 。 源 文件 的 后 级 名 
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是 .fla， 在 Flash 软件 中 可 以 编辑 这 种 格式 的 文件 。 由 于 浏览 器 并 不 支持 这 种 格式 ， 所 以 .fla 格 
式 的 文件 是 不 能 放 入 页 面 中 使 用 的 。 

后 级 名 为 .swf 的 文件 : 而 如 果 是 希望 放 入 到 页 面 中 的 Flash 文件 ， 它 的 格式 后 缀 名 是 .swf， 这 
是 将 .fla 格式 的 文件 经 过 压缩 得 到 的 一 种 小 容量 的 Flash 文件 格式 。 


15.3.2 ”在 页 面 中 放 入 Flash 文件 


在 页 面 中 放 入 Flash 文件 不 会 太 困难 。 从 某 个 角度 来 说 ， 它 的 原理 和 放 入 一 张 图 像 、 一 段 GIF 动 
画 是 一 样 的 。 所 不 同 的 是 ， 如 果 在 页 面 中 放 入 Flash 文件 ， 用 户 却 未 必 能 够 看 到 所 希望 的 结果 ， 原 因 在 
于 Flash 文件 需要 特定 的 播放 器 来 加 载 文 件 ， 如 Flash Player。 为 此 ， 可 以 通过 一 个 简单 的 JavaScript 
程序 来 令 系 统 下 载 ， 使 浏览 器 支持 Flash 文件 的 插件 ， 如 下 代码 所 示 : 

<Script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script> 


在 页 面 源码 <head> 标 签 内 声明 引用 了 这 样 一 个 .js 外 部 文件 ， 这 个 小 程序 的 作用 就 是 令 浏 览 器 下 载 
支持 Flash 文件 swflash.cab 插件 。 同 时 ， 这 个 外 部 文件 也 可 以 防止 在 不 同 的 浏览 器 中 显示 不 同 的 结果 。 


说 明 : 具体 程序 源码 参考 ;资料 光盘 \ 第 15 章 \scriptAC_RunActiveContentjs。 


在 这 段 代 码 中 声明 了 下 载 令 浏览 器 支持 Flash 文件 的 小 插件 ,这 样 设计 者 就 可 以 在 页 面 中 加 载 Flash 
文件 了 。 这 里 要 通过 一 个 <object> 标 签 来 将 对 象 放 入 到 页 面 中 , 具体 如 程序 15.1 所 示 , 其 是 通过 <object> 
标签 将 Flash 放 入 到 页 面 中 的 方法 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 15 章 \15-1 通过 <object> 标 签 将 Flash 放 入 到 页 面 中 .html】 


【实例 15-1】 通 过 <object> 标 签 将 Flash 放 入 到 页 面 中 ， 其 源码 展示 如 下 : 


程序 15.1 通过 <object> 标 签 将 Flash 放 入 到 页 面 中 .html 


<!IDOCTYPE html PUBLIC *-/W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.orq/1999/xhtml "> 

<head> 

<title> 通 过 <object> 标 签 将 Flash 放 入 到 页 面 中 </title> 

<Script src= "Scripts/AC_RunActiveContent.js" type="text/javascript"></script> 

</head> 

<body> 

<h1> 这 里 是 一 个 Flash 文件 </h1> 

<script type="text/javascript"> 

AC_FL_RunContent( 

‘codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version 
=9,0,28,0',"width','550','height','450', ‘title’,Endf','src',‘end',‘quality',high','pluginspage", http://ww 
w.adobe.com/shockwave/download/download.cqi?P1_Prod_Version=ShockwaveFlash, movi 
evend ); 

Jend AC code 
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17 </script> 
18 <noscript> 


19 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” 
20 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#versio 


21 =9,0,28,0" width="550" heigqht="450" title="End "> 


22 <param name="movie" value="end.swf /> 
23 <param name="quality" value="high" /> 
24 < embed src="end.swf" quality="high" 


25 pluginspage="http://www.adobe.com/shockwave/download/download.cqi? 
26 P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" 


27 width="550" height="450"></embed> 


28 </object> 
29 </noscript> 
30 </body> 

31 -</html> 


【运行 程序 】 最 终 在 页 面 中 的 效果 如 图 15.8 所 示 。 


这 里 是 一 个 Flash 文 件 


图 15.8 将 Flash 放 入 到 页 面 中 


【深入 学 习 】 代 码 第 19 行 是 <object> 标 签 的 起 始 ， 其 中 


clsid 是 class ID 的 缩写 。 对 于 每 个 组 件 类 ， 


都 需要 分 配 一 个 唯一 表示 它 的 代码 ， 就 是 ID。 为 了 避免 冲突 ， 微 软 使 用 guid 作为 clsid。guid 的 函数 主 


要 是 根据 当时 的 时 间 、 机 器 地 址 等 信息 而 动态 产生 ， 这 样 到 


是 ID 号。 


E 论 上 可 保证 全 球 唯一 。 所 以 那 一 串 数字 就 


<object> 标 签 中 可 以 加 入 width 或 者 height 属性 来 修改 播放 窗口 的 大 小 。 当 然 ， 如 果 使 用 样式 表 设 
计 者 可 以 做 到 更 多 不 同样 式 的 窗 体 表 现 。 第 20 行 代码 中 codebase 是 指 一 个 程序 集 的 位 置 ， 通 过 设置 
href 特性 告知 运行 库 按照 给 定 的 URL 来 查找 程序 集 。 这 里 是 引用 到 Macromedia 的 一 个 页 面 ， 它 的 功 


能 是 加 载 了 Flash 播放 器 。 
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从 第 22 行 代 码 开始 ,<param> 标 签 来 确定 对 象 的 更 多 细节 ，<param> 标 签 中 关联 两 个 属性 ， 分 别 是 
name 属性 和 value 属性 .name 属性 用 来 区 别 不 同 的 <param> 标 签 , 如 代码 写 为 “<param name="movie">” 
和 “<param name="balance">”， 这 样 就 是 两 个 不 同 的 <param> 标 签 。name 属性 关联 不 同 的 value 值 ， 
这 样 就 分 开 了 不 同 的 作用 ， 如 程序 15.1 中 第 22 行 和 第 23 行 所 示 。 第 22 行 代码 表明 了 引用 的 Flash 文 
件 的 位 置 。 

第 23 行 代码 表明 它 的 画面 质量 是 “高 ”级 别 的 。 当 设 置 为 不 同 的 name 属性 时 ， 可 以 触发 不 同 的 
作用 ， 如 表 15.1 所 示 。 


表 15.1 <param> 中 name 和 value 的 设置 方法 


movie some.swf 引用 一 个 Flash 文 件 
playcount | nm ”| 表示 循环 播放 n 次 
autostart 1 表示 页 面 打开 自动 播放 ，0 表 示 需 要 单 击 播放 
clicktopla: 1 表示 允许 播放 和 暂停 动画 ，0 表 示 禁 用 此 项 功能 
displaysize nL x=0， 原 始 大 小 ; x=1， 一 半 大 小 ; x=2， 
enablefullscreen controls 控制 切换 全 屏 ;_x=1， 允 许 切换 为 全 屏 ;_x=0， 禁 用 此 功能 
enabled 1 表示 可 以 人 为 控制 播放 器 ，0 则 表示 不 允许 
fullScreen 1 表示 全 屏 ，0 则 不 是 

full 

mini 播放 器 显示 模式 ，full 显 示 全 部 ，mini 最 简化 ，none 不 显示 播 
MMos none 放 控制 ， 只 显示 视频 窗口 ，invisible 全 部 不 显示 

invisible 
defaultFrame 显示 默认 框架 
rate 播放 速率 控制 ，1 为 正常 ，1.0+ 则 变 快 ， 反 之 变 慢 
volume 正常 声音 大 小 是 100% 
mute 1 表示 正常 ，0 表 示 静 音 


| 说明: 从 第 24 一 27 行 代码 中 , 在 <embed> 标 签 中 的 内 容 实际 上 的 作用 和 前 面 的 <object> 部 分 


是 一 样 的 ， 只 是 为 了 不 支持 <object> 标 签 而 存在 的 。 现 在 <embed> 标 签 已 经 渐渐 地 被 淘汰 了 。 


15.3.3 制作 Flash 的 软件 


之 前 已 经 见识 了 同属 于 Adobe 公司 的 Dreamweaver 软件 和 Photoshop 软件 ， 前 者 用 来 制作 页 面 ， 
后 者 用 来 制作 静 帧 图 像 。 而 本 节 介 绍 的 同样 是 Adobe 公司 的 Flash8 软件 ， 如 图 15.9 所 示 ， 它 是 用 来 专 
门 制作 Flash 的 软件 。 

Flash8 看 上 去 比 Dreamweaver 和 Photoshop 都 要 复杂 。 这 是 因为 Flash 文件 制作 时 ， 牵 涉 “ 时 间 ?” 
这 样 的 概念 ， 动 画 是 有 时 间 长 度 的 。 所 以 Flash8 中 有 属于 自己 特有 的 一 个 时 间 轴 窗口 ， 如 图 15.9 中 标 
注 所 示 。 其 他 部 分 与 Dreamweaver 和 Photoshop 都 是 比较 相似 的 ， 如 菜单 栏 、 工 具 栏 和 一 些 常用 的 窗 
口 排列 在 侧 栏 。 
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图 15.9 Flash8 软件 界面 


15.3.4 ”Flash8 的 菜单 


由 于 Flash8 也 属于 Adobe 公司 ，Flash8 的 菜单 分 类 也 多 少 类 似 于 Dreamweaver 和 Photoshop。 下 
面 对 它 们 进行 介绍 。 


日 . 百 百 - 百 百 蝇 书记 百 口 


Sf 
: 对 Flash 构成 的 图 像 进 行 编辑 的 操作 。 

: 使 用 一 些 测量 方式 来 定位 编辑 对 象 的 位 置 。 

: 插入 时 间 轴 ， 这 是 Flash8 特有 的 一 项 功能 。 时 间 轴 是 控制 动画 的 一 项 重要 的 工作 区 域 。 
: 针对 于 Flash 中 的 元 素 进 行 修改 ， 如 位 图 、 元 件 、 时 间 轴 等 。 

: 编辑 文本 的 字体 等 属性 。 

: 通过 调用 预先 设置 好 的 命令 进行 快速 操作 。 

站 :控制 Flash 文件 最 终 的 预览 效果 。 

了]: 选择 出 现在 软件 界面 中 的 工具 窗口 。 

帮助 : 


进行 打开 、 保 存 文件 等 基本 操作 。 


可 以 通过 互联 网 查找 关于 Flash8 的 资料 。 


其 实 无 论 Dreamweaver、Photoshop， 还 是 Flash8， 它 们 基本 的 操作 对 象 大 部 分 都 属于 图 像 、 文 本 ， 
只 是 在 不 同 的 环境 中 需要 不 同 的 方法 来 操作 对 象 ， 所 以 这 3 种 软件 在 大 部 分 的 功能 对 象 上 都 具有 很 大 


的 类 似 性 。 


15.3.5 “Flash8 的 主要 功能 


Flash8 的 工具 栏 界 面 和 Photoshop 工具 栏 大 同 小 异 。 当 然 ， 由 于 Flash 文件 主要 是 由 矢量 图 形 构成 
的 ， 所 以 这 些 工具 在 使 用 时 也 会 有 不 同 的 感觉 ， 如 图 15.10 所 示 ， 这 些 工具 也 能 完成 矢量 图 形制 作 。 但 
是 Flash 软件 主要 的 功能 并 非 用 于 设计 静 帧 图 像 , 而 是 一 方面 用 于 制作 矢量 图 形 的 动画 , 另 一 方面 可 实 
现 Flash 组 件 的 交互 来 制作 页 面 ， 这 需要 了 解 ActionScript 语言 。 


了 说 明 : 制作 Flash 不 在 本 书 讨论 的 范围 之 内 ， 有 兴趣 的 读者 可 以 参考 相关 类 别 的 书籍 。 
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图 15.10 ”Flash8 工具 栏 
15.3.6 ”Flash 的 常用 交互 技巧 


目前 ， 主 流 网 站 中 都 具备 给 页 面 添加 视频 的 功能 ， 这 就 是 通过 Flash 组 件 来 实现 的 。 在 了 解 如 何 添 
加 的 方式 之 前 ， 要 明白 什么 是 视频 文件 。 平 时 生活 中 ， 人 们 看 的 DVD、 摄 像 机 拍摄 的 视频 片段 ， 或 者 
是 数码 相机 拍摄 的 短片 ， 又 或 者 是 网 络 上 下 载 的 影片 等 。 这 些 视 频 绝 大 多 数 是 以 .avi、.rmvb、.moyv 等 
为 后 级 名 的 文件 。 

但 是 ， 这些 文件 容量 较 大 ， 实 在 不 适合 加 载 到 页 面 中 使 用 ， 直 到 FLV 文件 出 现 。FLV 视频 格式 占 
有 率 低 、 视 频 质量 还 算 凑 合 ,但 体积 相当 小 ， 这 些 特点 尤其 适合 被 加 载 在 网 络 中 。 所 以 FLV 视频 文件 
是 目前 网 络 视频 的 主流 文件 。 

FLV 就 是 随 着 Flash 软件 发 展 而 来 的 视频 格式 ， 目 前 被 众多 新 一 代 视频 分 享 网 站 所 采用 。 它 是 目 
前 增长 最 快 、 最 为 广泛 的 视频 传播 格式 。 它 是 在 Sorenson 公司 的 压缩 算法 的 基础 上 开发 出 来 的 。FLV 
格式 不 仅 可 以 轻松 地 导入 Flash 中 , 并 且 能 起 到 保护 版 权 的 作用 , 而 且 可 以 不 通过 本 地 的 微软 或 者 Real 
播放 器 播放 视频 。 

接 下 来 通过 Flash8 了 解 如 何 实现 在 页 面 中 添加 视频 文件 。 打 开 Flash8， 新 建 一 个 Flash 文档 ， 如 
图 15.11 所 示 。 
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15.11 打开 Flash8 的 界面 
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在 “文件 ”菜单 下 新 建 一 个 大 小 为 400*300 的 图 层 。 这 里 可 以 在 新 建 好 的 图 层 中 将 鼠标 放 在 编辑 
视窗 中 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “文档 属性 ”命令 修改 图 层 大 小 。 
在 “窗口 ”菜单 下 打开 “Flash 组 件 ” 窗口 ， 或 者 通过 快捷 键 Ctrl+F7 打开 组 件 窗口 ， 然 后 将 “组 
件 ” 中 的 FLVPlayback 拖 入 编辑 窗口 ， 这 是 一 个 播放 器 的 功能 ， 如 图 15.12 所 示 。 
接着 在 播放 器 中 放 入 准备 好 的 FLV 视频 文件 ， 先 先 中 编辑 窗 1 1， 在 属性 面板 中 打开 “参数 ”选项 
卡 ， 如 图 15.13 所 示 。 


上 宽 |sao0 |xlio.6 
© 本 二 0 jw 


图 15.12 放 入 FLV 播放 器 图 15.13 播放 器 的 参数 设置 


说 明 : 在 属性 面板 中 还 可 以 修改 播放 器 窗口 的 大 小 等 属性 。 


此 时 ， 需 要 设置 属性 面板 : PP 的“ “参数 ”数值 ， 图 15.13 中 的 下 面部 分 。 选 择 contentPath 选项 ， 表 
示 添 加 FLYV 视频 文件 的 路 径 。 这 里 放 入 事先 准备 好 的 文件 because of you.flv， 接 着 在 skin 选项 中 选择 
添加 播放 控制 按钮 的 样式 。 最 后 选择 “文件 ”|“ 导 出 ”|“ 导 出 影片 ”命令 , 即 保存 为 .swf 后 缀 的 Flash 。 
把 这 个 Flash 视频 加 载 到 页 面 中 ， 这 样 就 完成 了 一 个 页 面 中 加 载 视频 的 过 程 。 


15.4 案例 : 使 用 Dreamweaver 制作 页 面 


本 节 将 通过 一 个 实例 来 展示 如 何 合理 使 用 Dreamweaver 创建 页 面 。Dreamweaver 中 包含 了 大 部 分 
主流 布局 的 框架 ， 其 相当 杰出 的 一 点 是 它 的 模板 设计 ， 如 图 15.14 所 示 。 

(1) 选择 FilelNew 命令 ， 弹 出 模板 菜单 选择 界面 。 从 模板 菜单 选项 中 可 以 看 到 有 很 多 不 同类 型 的 
布局 模板 。 这 里 选择 的 是 一 个 普通 的 左右 分 栏 和 上 下 栏 的 布局 结构 。 当 创建 好 之 后 ， 可 以 在 可 视 编辑 
窗口 中 看 到 已 经 生成 的 代码 和 页 面 结构 ， 如 图 15.15 所 示 。 
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15.14 ”Dreamweaver 的 选择 布局 界面 15.15 ”创建 好 的 页 面 布局 


(2) 如 图 15.15 所 示 ， 软 件 界面 中 ， 上 面部 分 是 代码 生成 的 地 方 ， 而 下 半 部 分 是 可 预览 的 最 终 效 
果 ， 按 下 F12 键 ， 可 以 查看 在 浏览 器 中 的 预览 效果 ， 如 图 15.16 所 示 。 


15.16 在 浏览 器 中 的 预览 结果 


当然 ， 只 是 这 样 简 单 地 使 用 Dreamweaver 就 希望 能 够 成 为 一 个 尖端 页 面 开 发 高 手 显然 是 不 够 的 。 
起 码 当 软件 为 使 用 者 快速 补 全 代码 的 同时 ， 作 为 使 用 者 ， 需 要 能 够 很 好 地 理解 Dreamweaver 生成 的 代 
码 。 否 则 ， 非 但 Dreamweaver 不 能 帮 到 你 ， 相 反 很 容易 令 页 面 充满 大 量 的 垃圾 代码 。 


15.5 小 结 
本 章 简单 地 介绍 了 目前 主流 商业 化 网 站 创建 的 “利器 ”， 之 所 以 有 这 样 的 概念 ， 就 是 软件 始终 只 


是 一 种 辅助 性 工具 ， 要 做 好 前 端 页 面 的 设计 工作 。HTML+CSS 的 基础 知识 是 非常 重要 的 ， 只 有 在 理解 
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的 基础 上 再 去 创新 ， 才 能 创造 出 优秀 的 页 面 ， 而 不 是 一 旦 脱离 了 辅助 工具 就 变 得 手足 无 措 。 本 章 的 主 
要 知识 点 有 : 
口 “了解 Dreamweaver 是 一 种 可 视 化 的 页 面 开 发 工具 。 只 有 在 了 解 HTML 语言 的 基础 上 ， 使 用 
Dreamweaver 才能 发 挥 作用 ; 否则 ， 反 而 会 给 设计 者 带 来 更 多 的 麻烦 。 
口 ”了解 Photoshop 是 用 来 制作 图 像 的 工具 。 通 过 Photoshop 软件 ， 可 以 完成 页 面 中 图 像 的 设计 、 
编辑 工作 。 
口 了 解 Flash 视频 文件 的 特性 以 及 Flash 软件 是 开发 这 种 文件 的 工具 。Flash 软件 可 以 将 .fla 格式 
的 文件 导出 为 .swf 文件 ， 并 将 其 放 入 页 面 中 。 
在 之 后 的 章节 中 ， 会 通过 儿 个 综合 性 的 例子 ， 纵 观 一 个 整体 的 页 面 开发 是 如 何 实现 的 。 


282s 


第 16 章 
第 17 章 
第 18 章 
第 19 章 


第 4 篇 页 面 实战 篇 


综合 实例 一 : 
综合 实例 二 : 
综合 实例 三 : 
综合 实例 四 : 


制作 主流 网 站 界面 

设计 复杂 页 面 

制作 英文 网 站 

使 用 Dreamweaver 制作 中 文 网 站 


第 16 章 综合 实例 一 : 制作 主流 网 站 界面 


在 本 章 中 ， 将 综合 一 些 基本 的 知识 技能 ， 详 细 介 绍 一 个 页 面 是 如 何 从 构思 到 规划 ， 最 终 成 型 展现 
在 互联 网 上 ， 如 图 16.1 所 示 。 这 是 目前 大 部 分 网 站 所 运用 的 一 种 页 面 布局 。 布 局 中 分 为 头 部 、 底 部 和 
中 间 主 要 部 分 。 其 中 ， 中 间 的 部 分 又 通常 被 拆 分 成 几 列 ， 用 来 放置 不 同 的 页 面 内 容 。 
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16.1 常见 的 页 面 布局 


本 章 的 主要 知识 点 如 下 。 

口 ”构思 页 面 的 布局 。 

口 ” 制 作 页 面 的 顺序 。 

口 ”理解 制作 页 面 的 基本 思路 。 

【本 节 示 例 参考 : 资料 光盘 \ 第 16 章 \ 案 例 一 -html] 


16.1 构思 基础 的 布局 


从 前 面 的 知识 中 已 经 了 解 到 如 何 设计 一 个 页 面 。 首 先 ， 设 计 师 心 中 需要 明确 摆 放 哪些 内 容 ， 接 着 
就 是 构思 如 何 去 布 局 这 个 页 面 。 


~ 技巧 : 通常 为 了 便于 工作 ， 在 Photoshop 中 设计 出 大 概 的 草图 ， 就 像 图 16.1 那样 。 在 这 个 


草图 中 ， 设 计 师 可 以 大 致 将 页 面 的 布局 规划 出 来 ， 如 图 16.2 所 示 。 
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图 16.2 规划 页 面 结构 


可 以 把 页 面 分 割 成 这 样 的 4 部 分 。 页 面 的 顶部 Header、 底 部 Footer、 中 间 部 分 Main， 其 中 Main 
又 可 以 分 成 侧 栏 Side 和 主要 部 分 Main。 所 以 , 在 编写 代码 时 ， 它 的 结构 看 上 去 应 该 是 这 样 的 。 程序 16.1 
为 初始 页 面 的 结构 性 代码 。 


【代码 16-1】 初 始 页 面 的 结构 性 代码 ， 其 源码 展示 如 下 : 


程序 16.1 主页 
01 <body> 
02 <divid="container"> // 页 面 层 容器 
03 <div id="header"> // 页 面 头 部 
04 </div> 
05 <div id="Main"> // 页 面 主体 
06 <divid="Side"> // 侧 边栏 
07 </div> 
08 </div> 
09 <div id="Footer> // 页 面 底部 
10 </div> 
11 -</div> 
12 </body> 


【深入 学 习 】 代 码 中 通过 div 定义 了 页 面 的 儿 个 组 成 部 分 : 头 部 、 主 题 、 边 栏 和 底部 。 它 们 都 包 
含 在 第 2 行 定义 的 container 层 中 。 

这 里 已 经 设计 好 了 一 层 层 的 框 模型 。 接 下 来 就 是 针对 于 每 一 块 区 域 ， 设 计 好 针对 于 每 一 对 象 的 样 
式 表 。 


16.2 设计 基础 模块 的 样式 表 


针对 不 同 的 结构 部 分 ， 设 计 好 相对 应 的 CSS 样式 表 ， 如 程序 16.2 所 示 。 
【代码 16-2】 基 本 结构 所 对 应 的 样式 表 ， 其 源码 展示 如 下 : 
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01 <styletype=text/css> 


02 body{ 
03 font:12px 微软 雅 黑 ; 

04 margin:0px; 

05 text-align:center; 

06 background:#FFF:; 

07 } 

08 #container{ 

09 width:100%; 

10 } 

11 #Header { 

12 width:800px; 

13 margin:0 auto; 

14 height:100px; 

15 background:#FFCC99; 
16 和 

17 #Main { 

18 width:800px; 

19 margin:0 auto; 

20 height:400px; 

21 background:#CCFF00; 
22 } 

23 #Side { 

24 float: left; 

25 width: 20em; 

26 background: red; 

7 padding: 15px 0; 

28 } 

29 #Footer { 

30 width:800px; 

31 margin:0 auto; 

32 height:50px; 

33 background:#00FFFF; 


程序 16.2 CSS 设 计 


// 基 本 信息 


// 使 页 面 文 本 居中 


// 页 面 层 容器 


// 页 面 头 部 


// 使 #Header 部 分 自动 页 面 居 中 


// 页 面 主体 


// 使 #Main 部 分 自动 页 面 居 中 


// 侧 栏 


// 设 置 侧 栏 的 空 距 


// 页 面 底部 
// 使 #Footer 部 分 自动 页 面 居中 


二 了 。 说 明 : 这 里 为 了 令 读 者 能 够 容易 辨识 不 同 的 模块 ， 所 以 每 一 个 CSS 样式 表 中 都 添加 了 背景 
颜色 。 事 实 上 ， 在 最 终 的 页 面 中 并 不 需要 这 样 做 。 


【深入 学 习 】 上 述 代 码 定义 的 是 前 面 设计 好 的 页 面 , 其 中 第 3 一 6 行 是 整个 页 面 的 样式 , 包括 字体 、 
背景 色 等 。 代 码 第 23 一 28 行 是 侧 边栏 的 样式 ， 包 括 它 的 宽度 、 背 景色 等 。 
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【运行 程序 】 它 目前 在 浏览 器 中 看 起 来 如 图 16.3 所 示 。 


main 


footer 


图 16.3 页 面 布局 的 结构 效果 
这 样 ， 一 个 基础 的 框架 就 出 来 了 ， 接 下 来 就 需要 细 化 工作 ， 去 逐一 完成 每 一 个 框 模型 的 对 象 。 


16.3 完善 网 站 的 子 模块 


基于 已 经 创建 好 的 页 面 结构 一 点 点 地 去 细 化 完成 网 站 的 各 个 部 分 ， 如 头 部 、 底 部 、 侧 栏 和 页 面 的 
主体 部 分 。 只 要 按部就班 ， 这 些 都 不 会 很 难 。 


16.3.1 网 站 的 导航 栏 
希望 最 后 出 现 的 效果 如 图 16.4 所 示 。 


图 16.4 导航 栏 的 效果 


大 部 分 导航 栏 都 是 通过 列表 项 和 行内 模块 展现 出 来 的 ， 导 航 栏 是 常用 的 页 面 元 素 之 一 ， 这 个 导航 
栏 就 是 比较 典型 的 一 种 。 如 程序 16.3 中 导航 栏 的 制作 方法 。 


【代码 16-3】 制 作 导 航 栏 ， 其 源码 展示 如 下 : 
程序 16.3 ”导航 栏 


01 <divid="tabs"> 

02 <ul> 

03 <li><a href="#" title=" 菜 单 1"><span> 菜 单 1</span></a></l> 

04 <li><a href="#" title=" 菜 单 2"><span> 菜 单 2</span></a></li> 

05 <li><a href="#" title=" 菜 单 3"><span> 菜 单 3</span></a></li> 

06 <li><a href="#" title=" 菜 单 4><span> 菜 单 4</span></a></li> 

07 <li><a href="#" title=" 菜 单 5"><span> 花 样 年 华 </span></a></li> 

08 <li><a href="#" title=" 菜 单 6"><span> 博 客 </span></a></li> 

09 <li><a href="#"' title=" 菜 单 7"><span> 联 系 我 们 </span></a></li> 
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10 </ul> 
11 </div> 


【深入 学 习 】 代 码 第 3 一 9 行 通过 <li> 罗 列 出 了 菜单 项 ， 当 用 户 单 击 每 个 菜单 项 时 ， 通 过 href 属性 
指定 的 位 置 可 以 导航 到 目的 地 。 
那么 ， 针 对 于 这 个 导航 栏 ， 它 的 CSS 样式 表 的 写法 如 程序 16.4 所 示 。 


【代码 16-4】 制 作 导航 栏 的 样式 表 ， 其 源码 展示 如 下 : 
程序 16.4 导航 栏 的 样式 表 


01 #tabs { position:relative; /lf#tabs 层 的 样式 定义 
02 float:right; 

03 ‘width:100%; 

04 font-size:93%; 

05 border-bottom:1px solid #F45551; // 设 置 边框 的 样式 

06 line-height:normal; 

07 } 

08 #tabs ul { 

09 margin:0; 

10 padding:10px 10px 0 50px: // 设 置 空 距 样式 来 修饰 导航 栏 
11 list-style:none; // 取 消 项 目 列表 符号 

性 } 

13 #tabs i { display:inline; // 使 列表 项 横向 排列 

14 margin:0; 

15 padding:0; 

16 } 

He #tabs a{ float:left; 

18 background:url(tableft9.gif) no-repeat left top; 。 // 给 条 目 添加 背景 图 像 
19 margin:0; 

20 padding:0 0 0 4px; 

21 text-decoration:none; // 取 消 列表 项 链接 下 划 线 
22 } 

23 #tabs a span {float:left: 

24 display:block; 

25 background:url("tabright9.gif") no-repeat right top; 

26 padding:5px 15px 4px 6px; /使 用 空 距 修饰 链接 效果 
2 Color:#FFF:; 

28 } 

29 l/lES hack // 设 置 Hack 以 适应 IE5 浏览 器 
30 #tabs a:hover span { 

31 color#FFF; 

32 } 

33 #tabs a:hover { 

34 background-position:0% -42px; 

35 了 

36 #tabs a:hover span { 
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ey background-position:100% -42px:; 
38 } 


【深入 学 习 】 第 1 一 7 行 定义 了 tabs 层 的 样式 ， 涉 及 字体 、 宽 度 等 。 第 13 一 16 行 的 样式 定义 特别 
关键 ， 其 中 第 13 行 表示 将 列表 项 横向 排列 。 


说 明 : 第 29 行 之 后 是 针对 于 IE 5 之 前 版 本 的 Hack。 


16.3.2 页面 的 侧 栏 


页 面 的 侧 栏 是 一 个 浮动 层 ， 它 的 中 间 可 以 放 入 任何 页 面 对 象 。 通 常 ， 一 些 简单 的 条 目 适合 放 在 这 
里 ， 作 为 目录 使 用 。 而 页 面 的 主体 部 分 ， 放 入 一 些 具 体 对 象 的 文本 描述 ， 最 好 再 添加 一 些 图 像 ， 令 这 
个 页 面 变 得 更 加 生动 。 这 个 例子 中 ， 希 望 最 终 的 样子 如 图 16.5 所 示 。 


剧情 介绍 : 隔 澡 1927 盾 到 妆 杀 和 村 1 无 开 柱 刊 ， 至 次 全 姓 部 未 可 成 功 ， 年 妈 扩 这 
日 3 5 了 由 后 生生 鞭 ， 世 外 
标题 1 光良 情 条 , 伍 内 坚定 本 x 到 里， 多 大 
文本 内 容 人 et 
二 和 ,他 疫 有 庙 革 看 en 
标题 2 识 虽 动 大 家 条 点 白 己 的 好 务 。 吨 卫 长 各 


栈 数 际 帐 ， 左 点 拷 的 系 叶 生活 里 ， 包 从 厅 放 认 过 对 自 二 、 re 
文本 内 容 自己 区 实 所 行动 来 交规 时 白 己 的 其 及 ! 


标题 3 


文本 内 容 


图 16.5 页 面 的 主体 


那么 ， 这 里 需要 更 细 化 地 去 解决 页 面 的 结构 性 问题 。 左 侧 的 浮动 层 不 难 ， 只 要 解决 好 文本 的 排列 即 
而 右 侧 主体 部 分 ， 用 了 表格 来 划分 图 像 和 文本 的 内 容 。 有 具体 的 写法 如 程序 16.5 细 化 页 面 中 间 结 构 。 


【代码 16-5】 页 面 中 间 部 分 的 细 化 结构 ， 其 源码 展示 如 下 : 


程序 16.5 细 化 页 面 中 间 结 构 
01 <div id="Main"> 
02 <div id="Side"> 


03 <div class="sidetext"> 页 面 人 出栏， 在 页 面 的 左 侧 
04 <h2> 标 题 1</h2> 


05 <p> 文 本 内 容 

06 <h2> 标 题 2</h2> 
07 <p> 文 本 内 容 

08 <h2> 标 题 3</h2> 
09 <p> 文 本 内 容 

10 </div> 


11 </div> 
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12 <div> 

13 <table> 

14 <tr> 

15 <td id="film"><img src=" 图 片 /1.jpg" ><p> 肖 申 克 的 救赎 

16 <td> 剧 情 介绍 : <span id="film"> 阿 瑞 1927 年 因 谋 杀 罪 被 判 无 期 徙 刑 … 
17 </tr> 

18 <tr> 

19 <td id="film"><img src=" 图 片 /2jpg"><p> 教 父 1 

20 <td> 剧 情 介绍 : <span id="film"> 1945 年 夏天 ，.… 

21 </tr> 

22 <tr> 

23 <td id="film"><img src=" 图 片 /3jpg"><p> 教 父 2 

24 <td> 剧 情 介绍 : <span id="film"> 在 西西 里 ， 少 年 时 代 的 维 托 为 报 父 仇 ，.… 
25 </tr> 

26 <tr> 

27 <td id="film"><img src=" 图 片 /4.jpg"><p> 教 父 2 

28 <td> 剧 情 介绍 : <span id="film"> 在 警 长 戈 登 和 地 区 检察 官 哈 维 。 丹 特 的 协助 下 ，.… 
29 </table> 

30 </div> 

31 </div> 


【深入 学 习 】 第 13 一 31 行 定义 了 一 个 table 表格 ，<tr> 是 表格 的 行 ，<td> 是 表格 的 列 。 
当 基 本 的 结构 完成 之 后 ， 需 要 设计 对 应 于 这 个 结构 的 样式 表 ， 这 需要 经 过 不 断 反 复 地 查看 效果 ， 
才能 达到 美观 。 如 程序 16.6 编写 的 修饰 页 面 的 样式 表 。 


【代码 16-6】 修 饰 页 面 主体 的 样式 表 ， 其 源码 展示 如 下 : 
程序 16.6 ”对 应 于 这 个 结构 的 样式 表 


01 .sidetext {padding:10; /设置 侧 栏 中 文本 的 样式 
02 color:black; 

03 } 

04 ”h2 {font:2em 幼 圆 ; 

05 } 

06 td {color:navy; // 设 置 表格 中 文本 的 样式 
07 padding:15px; 

08 height:200px; 

09 border:1px solid white; 

10 } 

11 #fIm {font:.8em; /设置 flm 层 文本 样式 
12 color:black; 

13 } 


【深入 学 习 】 上 述 代码 都 是 定义 的 样式 ， 其 中 第 6 一 10 行 是 对 前 面 表格 中 的 文本 设置 样式 ， 涉 及 
文本 与 表格 边线 之 间 的 距离 和 边线 的 颜色 等 。 
最 后 一 部 分 是 页 面 的 底部 。 页 面 的 底部 也 是 一 个 单独 的 层 ， 它 的 代码 十 分 简单 : 
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<hr width="700"> 
<div id="Footer"><p>&copy; 2008-10-23 
</div> 


， 说 明 : <hr> 表 示 的 是 “水 平 线 ”。 


16.4 最 终 页 面 


最 终 ， 将 所 有 的 代码 放 在 一 个 文档 中 ， 可 以 看 到 最 终 的 页 面 效 果 ， 如 图 16.6 所 示 。 


dd i ld eal nad od) odd 
MAN nnn me ear 
标题 1 pam mn RA 
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标题 2 Peas en 
Wm a ana ra 
mn mm ne ! 
标题 3 WM ens mre ween 
nT Fe 
am Dm aa ee 
I 
i Te 
Pomp eh pe 
生 。 交 全 人 。 划 人 ”中 间 人 且 于 
四 a rm. 


图 16.6 最 终 页 面 效 果 


16.5 小 结 


本 章 主要 介绍 了 一 个 页 面 从 构思 到 成 型 的 过 程 。 相 同 页 面 不 同 代码 的 例子 有 很 多 ， 这 里 给 出 了 最 
易于 理解 的 一 种 基础 的 做 法 ， 即 便 今 后 遇 到 更 复杂 的 页 面 ， 其 基于 的 原理 都 是 一 样 的 ， 都 是 建立 于 这 
样 的 一 种 制作 思路 。 即 将 页 面 结构 和 表现 分 离开 ， 针 对 不 同 的 页 面 对 象 去 进行 编辑 。 在 第 17 章 中 ,将 
基于 这 样 的 结构 页 面 ， 实 现 更 多 更 细致 的 页 面 修饰 ， 令 页 面 更 丰富 。 
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本 章 将 在 第 16 章 内 容 的 基础 上 ， 将 页 面 拆 分 得 更 细致 化 ， 并 且 在 布局 完成 的 页 面 基础 上 ,熟悉 如 
何 去 修 饰 页 面 、 拓 展 页 面 的 功能 。 学 习 了 本 章 内 容 ， 掌 握 了 这 些 千 篇 一 律 的 操作 技巧 后 ， 可 以 说 足以 
应 付 市 面 上 大 部 分 主流 的 页 面 。 本 章 的 主要 知识 点 如 下 。 
构思 页 面 的 布局 。 
按照 结构 顺序 制作 页 面 。 
如 何 设计 对 应 于 每 个 模块 的 样式 表 。 
理解 制作 页 面 的 整体 思路 。 


OOODO 


17.1 页 面 的 框架 布局 


在 设计 一 个 页 面 时 ， 首 先是 内 容 的 定位 ， 其 次 是 依据 页 面 内 容 排 版 页 面 布局 ， 以 配合 需要 放 入 页 
面 中 的 内 容 。 当 设计 好 初级 的 页 面 布局 后 ， 如 果 页 面 内 容 需 要 ， 则 可 以 进一步 去 细 分 页 面 布局 。 当 页 
面 布局 完成 之 后 ， 最 后 可 以 在 相应 的 位 置 按照 预先 的 设计 放 入 相应 的 页 面 修饰 。 

设计 页 面 的 方式 有 很 多 种 ， 重 要 的 是 要 保证 页 面 源码 的 可 读 性 、 可 扩展 性 和 良好 的 兼容 性 。 基 于 
这 个 思路 ， 本 章 同样 是 使 用 相同 的 方案 去 制作 更 复杂 的 页 面 。 

【本 章 示 例 参考 : 资料 光盘 \ 第 17 章 \ 案 例 二 .html] 


17.1.1 定位 页 面 的 内 容 


假如 一 个 具备 大 量 信息 的 基本 门户 页 面 需 要 较 多 有 框 模型 的 层 , 那么 如 何 去 处 理 好 一 层 层 的 全 加 ， 
就 是 比较 重要 的 一 项 工作 。 本 章 的 实例 是 关于 “页 面 设计 的 一 个 主题 ”， 如 图 17.1 所 示 。 


footer. 


图 17.1 页 面 的 初级 布局 
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可 以 看 出 ， 首 先 页 面 的 初级 布局 是 一 个 分 为 4 部 分 的 框架 ， 分 别 是 intro、linklist、supportingText 
和 footer。 其 次 ， 在 大 框架 之 下 ， 也 已 经 拆 分 出 很 多 不 同 颜色 块 的 框 模型 。 


说 明 : 这 是 为 了 针对 不 同 的 页 面 内 容 ， 它 们 各 自 属 于 不 同 的 上 级 框 模型 ， 即 初级 布局 中 的 4 


17.1.2 页面 初级 布局 的 代码 
基于 这 样 的 框架 ， 它 的 代码 如 程序 17.1 所 示 。 
【代码 17-1】 页 面 初级 布局 的 代码 ， 其 源码 展示 如 下 : 
程序 17.1 页 面 框架 


01 <body> 

02 <div id="container"> // 页 面 层 容 器 

03 <div id="intro"> // 页 面 的 头 部 

04 </div> 

05 <div id="supportingText"> ”// 页 面 的 右 侧 栏 
06 <div id="footer"> 

07 </div> 

08 </div> 

09 <div id="linkList"> // 页 面 的 左 侧 栏 
10 </div> 

11 </div> 

12 </body> 


说 明 : footer 框 模型 部 分 是 赃 套 在 supportingText 框 模型 中 , 这 样 的 设计 是 为 了 不 希望 页 面 
页 脚 撑 满 页 面 的 整个 宽度 ， 而 是 为 了 令 它 只 是 存在 于 页 面 主体 的 右 侧 中 。 如 果 设计 者 不 希望 这 么 做 ， 完 
全 可 以 把 它 独立 出 来 。 


【深入 学 习 】 代 码 第 2 一 11 行 通过 div 将 页 面 分 成 了 几 部 分 ， 包 括 头 部 、 左 侧 栏 和 右 侧 栏 。 这 3 
部 分 都 放 在 一 个 名 为 container 的 div 层 中 。 
基于 页 面 的 结构 性 的 代码 , 紧 接着 需要 做 好 的 使 是 如 何 通 过 CSS 样式 表 精 确 控制 整个 页 面 的 布局 ， 
如 程序 17.2 所 示 为 页 面 初 级 布局 所 运用 的 样式 表 。 
【代码 17-2】 页 面 初 级 布局 所 运用 的 样式 表 ， 其 源码 展示 如 下 : 


程序 17.2 ”页面 框 架 的 样式 


01 ”body { font : 12px/17px 微软 雅 黑 ; // 设 定 页 面 的 基本 样式 
02 color : #000; 
03 background : #dae8bd url(bg_lines.gif) no-repeat top 0%; 
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margin : auto auto; 
padding : 0; 
text-align : center; 


} 
#container { width : 762px; 
padding : 0; 
margin : auto; 
text-align : left; 
有 
#intro { vertical-align : bottom; 
} 
#supportingText { padding : 0; 
margin : -3px 0 40px 0; 
background : #d6e6b6; 


border : 1px solid white; 


Width : 469px; 
float : right; 


} 
#footer { background : #a2c1b9; 
border-top : 1px solid white; 
padding : 0 0 2px 24px; 


} 
#linklist { margin-top : 50px; 
clear : both; 
padding : 20px 10px 10px 10px; 
display : block; 
} 


/| 设置 #container 层 的 宽度 


// 设 置 #supportingText 层 的 位 置 


// 设 置 边框 的 样式 


/设置 #container 层 的 宽度 
// 设 置 空 距 的 样式 


/设置 者 inklist 层 的 位 置 


【深入 学 习 】 在 这 段 样式 表 中 ， 可 以 看 出 它们 对 每 一 块 的 布局 是 如 何 定义 的 ，body 定义 了 整个 页 


面 的 初始 背景 、 文 本 基本 信息 。 


container 则 是 定义 了 整个 页 面 的 主体 部 分 ， 参 照 图 17.1 可 以 容易 地 分 


辨 出 intro、supportText、footer 和 linklist 所 定义 的 不 同位 置 框架 。 


17.2” 细 化 页 面 的 局 部 


当 页 面 的 整体 构架 完成 之 后 ， 接 下 来 就 是 对 局 部 的 修饰 和 细 化 ， 在 图 17.1 中 已 经 可 以 看 出 在 每 一 
个 初级 框架 下 将 要 填 入 的 内 容 ， 那 么 在 本 节 中 将 一 一 来 揭 开 这 些 模块 神秘 的 面纱 。 


17.2.1 intro 部 分 
页 面 的 头 部 在 这 


有 定义 为 intro， 依 照 这 个 例子 中 的 需要 ， 将 主要 使 用 图 像 来 填充 这 一 部 分 。 当 然 ， 


需要 设计 更 详细 的 样式 表 来 描述 intro 部 分 ， 如 程序 17.3 所 示 为 完善 页 面 的 intro 部 分 。 
【代码 17-3】 完 善 intro 部 分 的 代码 ， 其 源码 展示 如 下 : 
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程序 17.3 intro 部 分 
01 <div id="intro"> 


02 <div id="pageHeader> 

03 <h1><span> 更 改 样式 表 可 以 在 这 个 位 置 替 换 页 面 的 banner 

04 </span></h1></div> 

05 <div id="quickSummary"> 

06 <p class="p1"><span> 使 用 这 个 样式 表 可 以 任意 更 改 页 面 右上 角 的 图 像 </span></p> 
07 <p class="p2"><span> 设 计 复杂 页 面 <a href="" >html</a> &<a 

08 href="">css</a></span></p> 

09 </div> 

10F 

11 </div> 


【深入 学 习 】 上 述 代码 在 页 面 的 头 部 添加 了 两 个 div， 第 7、8 行 中 虽然 添加 了 两 个 链接 ， 但 都 没 
有 设置 它 的 导航 目的 地 。 
VE 


说 明 : 如 果 没 有 相应 的 样式 表 做 出 定位 ， 通 过 上 述 结构 性 标签 是 无 法 窥探 出 页 面 的 形态 的 。 


为 上 述 代码 添加 所 对 应 的 样式 表 ， 如 程序 17.4 所 示 的 intro 部 分 的 CSS 样式 表 。 
【代码 17-4】intro 部 分 的 CSS 样式 表 ， 其 源码 展示 如 下 : 
程序 17.4 intro 部 分 的 样式 表 


01 #pageHeader {padding : 0; // 设 置 #pageHeader 层 在 页 面 中 的 表现 
02 margin : 0; 

03 height : 246px:; /固定 层 的 高 度 大 小 

04 border : 1px solid white; /设置 边框 的 样式 

05 } 

06 #pageHeader h1 { background : url(title_hdrjpg) no-repeat top left /设置 背景 图 像 
07 width : 760px; 

08 height : 176px:; 

09 margin :70px00 0; // 设 置 不 同 边 距 大 小 

10 padding : 0; 

11 } 

12 #pageHeader h1 span { display : none; /隐藏 页 面 对 象 

13 ; 

14 #pageHeader h2 {padding :0; 

15 margin : 0; 

16 } 

17 #pageHeader h2 span { display : none; /隐藏 页 面 对 象 

18 上 

19 #quickSummary p.p1{ width : 320px:; 

20 height : 92px; 

21 position : absolute; // 定 位 其 在 页 面 的 位 置 属性 
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2 top : 1px; 

23 margin-left : 470px; 

24 padding : 0; // 设 置 空 距 为 0 

25 font-size : 11px; 

26 color : #ff; // 设 置 文本 颜色 

27 font-family : 微软 雅 黑 ; 

28 background : url(bg_redbox.png) no-repeat; 。“// 设 置 背景 图 像 

29 

30 #quickSummary p.p1 span { display : none; 

31 } 

32 #quickSummary p.p2 { display : block; /隐藏 页 面 对 象 

33 position : absolute; /绝对 定位 

34 top : 53px; 

35 padding :0 0 0 7px; 

36 font-size : 11px; 

37 text-align : right:; 

38 color : #490909; 

39 font-family : 微软 雅 黑 ; 

40 clear : both; 

41 } 

【深入 学 习 】 通 过 这 样 的 样式 表 ， 就 便于 理解 程序 17.3 了 。 程 序 17.3 中 第 2 一 4 行 是 pageHeader 

部 分 ， 在 这 段 代 码 中 ， 表 明 使 用 了 背景 图 像 来 放置 在 页 面 头 部 的 位 置 ， 这 可 以 通过 程序 17.4 的 第 6 一 


11 行 看 出 来 。 之 后 为 了 令 页 面 更 具 美 观 性 ， 在 页 面 的 右上 角 放 入 - 
需要 注意 的 是 ，pageHeader hl span 样式 表 对 象 是 被 隐藏 的 ， 虽 然 这 样 看 


序 17.4 中 第 19 一 29 行 所 示 。 


- 张 修饰 的 图 像 bg_redbox.png， 如 程 


上 去 似乎 没有 什么 用 ， 但 有 时 这 样 的 做 法 便于 配合 JavaScript 使 用 。 


以 及 页 面 的 中 间 头 部 图 像 3 部 分 组 成 。 


说 明 : quickSummary p.p2 对 象 定义 了 一 个 小 小 的 标题 栏 在 页 面 的 左上 角 ， 这 样 做 的 目的 
是 为 了 增加 页 面 的 美观 度 。 所 以 从 全 局 来 说 ，intro 部 分 可 以 看 成 是 由 页 面 左上 角 的 标题 和 右上 角 的 图 像 


运行 程序 】 浏 览 该 


页 面 ， 如 图 17.2 所 示 。 


图 17.2 页 面 的 头 部 
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17.2.2 ”页面 的 左 侧 部 分 


当 设 计 好 页 面 的 头 部 后 ， 接 下 来 先 处 理 页 面 的 左 侧 ， 从 图 17.1 中 可 以 看 出 ， 页 面 的 整个 左 侧 栏 都 
放 在 linklist 对 象 中 。 下 面 来 看 一 下 左边 侧 栏 的 结构 性 代码 ， 如 程序 17.5 所 示 。 
【代码 17-5】 页 面 左 侧 部 分 结构 性 代码 ， 其 源码 展示 如 下 : 


程序 17.5 页面 左 侧 部 分 结构 


01 <divid="linkList"> 


02 <div id="preamble"> 

03 <h3><span> 设 计 法 则 </span></h3> 

04 <p class="p1"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

05 保持 简单 纯朴 : 

06 </span></p> 

07 <p class="p2"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

08 呼吸 空间 : 

09 </span></p> 

10 <p class="p3"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
11 大 就 是 美 : 

12 </span></p> 

13 </div> 

14 <divid="linkList2"> 

15 <div id="lselect"> 

16 <h3 class="select"><span>Select a Design:</span></h3> 

17 <ul> 

18 <li><a href="" title="AccessKey: a" accesskey="a"> 目 录 1</a> 一 
9 一 <a href=" >name one</a></li> 

20 <li><a href="" title="AccessKey: b" accesskey="b"> 目 录 2</a> 一 
21 一 <a href=” >name two</a></li> 

22 <li><a href="" title="AccessKey: c" accesskey="c"> 目 录 3</a> 一 
23 一 <a href=">name three</a></li> 

24 <li><a href="" title="AccessKey: d" accesskey="d"> 目 录 4</a> 一 
25 一 <a href=">name four</a></li> 

26 <li><a href="" title="AccessKey: e" accesskey="e"> 目 录 5</a> 一 
27 一 <a href=">name five</a></li> 

28 <li><a href="" title="AccessKey: f"'accesskey="f'> 目 录 6</a> 一 
29 一 <a href=">name six</a></li> 

30 </ul> 

31 </div> 

32 <div id="larchives"> 

33 <h3 class="archives"><span>Archives:</span></h3> 

34 <ul> 

35 <li><a href=”" > 下 一 页 &raquo;</a></li> 

36 <li><a href=” > 内 容 简 介 </a></li> 

37 </ul> 

38 </div> 

39 </div> 
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【深入 学 习 】 从 这 段 代 码 中 可 知 ，linklist 框 模型 中 包含 了 两 部 分 ， 分 别 是 preamble 和 linklist2。 
而 linklist2 下 是 两 个 项 目 列表 部 分 ， 分 别 是 lselect 和 larchives。 所 以 在 图 17.1 中 ， 页 面 左 侧 由 3 个 颜 
色 块 组 成 ， 这 3 个 颜色 块 就 是 preamble、lselect 和 larchives。 它 的 样式 表 代 码 如 程序 17.6 所 示 。 


【代码 17-6】 页 面 左 侧 布局 的 CSS 样式 表 ， 其 源码 展示 如 下 : 
程序 17.6 页面 左 侧 布局 的 样式 表 


#linklist { margin-top : Opx; 
padding:0px; 
height:800px:; 
| 


#linkList #linkList2 ul { padding : 20px 10px 10px 10px; 


display : block; 


} 
#linklist li { margin : 2px 0; 


} 
#preamble { padding : 0; 
margin : -3px 0 0 0; 
width : 288px; 
float : left; 
} 
#preamble h3 { width : 288px; 
height : 47px:; 
margin : 0; 
padding : 0; 
border-top : 1px solid white; 
8 
#preamble h3 span { display : none; 


} 
#preamble p { font : 12px/15px 微软 雅 黑 ; 
padding : 0 0 0 3px; 


width : 288px:; 
} 
#preamble p.p1 { margin-top : 10px; 
} 
lselect, #larchives { width : 256px; 
clear : left; 
padding : 0; 
margin : 0; 
} 


#lselect { border-bottom : 1px solid #fff; 
margin-top : 20px; 
} 
#larchives { border-bottom : 1px solid #fff; 
margin-top : 20px; 
} 


扩 lselect h3 span, #archives h3 span { display : none; 


// 设 置 草 inklist 在 页 面 中 的 样式 


/设置 空 距 的 样式 
// 设 置 为 块 级 对 象 


/设置 元 reamble 在 页 面 中 的 样式 


/隐藏 对 象 


/设置 剂 select 在 页 面 中 的 样式 
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41 } 

42 pffont : 12px/17px 微软 雅 黑 ; // 设 置 段落 文本 的 样式 
43 margin :00 17px 0; 

4 } 

45 a:link {font-weight : bold; // 设 置 链接 状态 的 样式 
46 text-decoration : none; // 取 消 链 接 下 划 线 

47 color : #027d87; // 设 置 链接 文本 的 颜色 
48 } 

49 a:visited { font-weight : bold; // 设 置 访问 链接 的 样式 
50 text-decoration : none; /取消 链接 下 划 线 

51 color : #858686; 

52 和 

53 a.c:visited { font-weight : normal; // 设 置 访问 链接 的 样式 
54 text-decoration : none; 

55 color : #858686; 

56 3» 

57 a:hover, a:active { text-decoration : underline; // 设 置 滑 过 链接 的 状态 样式 
58 color : #000505; 


60 ulf{list-style-type re 

61 margin : 0; 

62 padding : 0; 

63 和 

【深入 学 习 】 上 述 代码 中 ， 第 1 一 4 行 的 linklist 样式 表 定 义 了 左 侧 框 模型 的 大 小 、 位 置 属性 。 第 
10 一 28 行 代 码 以 preamble 开头 的 一 系列 样式 表 其 对 象 是 图 17.1 中 的 第 1 个 颜色 块 。 而 第 34 一 41 行 代 
码 的 样式 表 对 应 的 是 图 17.1 中 的 第 2 和 第 3 个 颜色 块 , 从 第 42 一 63 行 是 对 页 面 基本 属性 的 修改 , 如 文 
本 的 颜色 、 链 接 的 状态 和 项 目 列表 的 属性 。 

【运行 程序 】 最 终 的 显示 效果 如 图 17.3 所 示 。 


图 17.3 页 面 的 左 侧 栏 
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17.2.3 页面 的 右 侧 栏 主体 部 分 


这 个 复杂 工 
中 ， 主 体 部 分 通 


程 的 最 后 一 项 就 是 完成 页 面 所 剩 下 的 右 侧 主 栏 ， 事 实 上 这 是 最 容易 的 一 部 分 。 在 页 面 
常用 来 放置 最 重要 的 信息 ， 而 不 需要 很 多 花样 的 摆设 来 彰显 个 性 。 代 码 主体 部 分 的 写 


法 如 程序 17.7 所 示 。 


说 明 : 如 果 一 个 页 面 只 有 美观 ， 而 缺少 内 容 ， 事 实 上 这 个 页 面 就 失去 了 灵魂 ， 那 么 无 论 这 


， 其 实 不 过 只 是 一 个 花架 子 。 


【代码 17-7】 页 面 右 侧 主 栏 的 结构 ， 其 源码 展示 如 下 : 


程序 17.7 ”页面 右 侧 主 栏 


01 <divid="supportingText"> 


<div id="explanation"> 
<h3><span> 文 本 内 容 一 </span></h3> 
<p class="p1"><span> ”域名 的 作用 : 


</span></p> 
<p > 后 缀 的 选择 : 


</span></p> 
</div> 
<div id="participation"> 
<h3><span> 文 本 内 容 二 </span></h3> 
<p><STRONG> 什么 是 robots.txt? </STRONG> </p> 
<p>robots txt 是 一 个 纯 文本 文件 ， 


<p > 当 一 个 搜索 机 器 人 访问 一 个 站 点 时 


<p >robots txt 必须 放置 在 一 个 站 点 的 根 目录 下 ， 而 且 文 件 名 必须 全 部 小 写 。 
</div> 
<div id="benefits"> 
<h3><span> 文 本 内 容 三 </span></h3> 
<p > 随 着 网 页 制作 经 验 的 积累 ， 


</div> 

<div id="requirements"> 
<h3><span> 文 本 内 容 四 </span></h3> 
<p> 一 般 来 说 ， 绝 大 多 数 普 通 


<p> 波 士 顿 一 位 图 形 设计 者 兼 美术 讲师 说 


</div> 
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32 

33 <div id="footer">End 
34 </div> 
35 </div> 


深入 学 习 】 这 段 代 码 非常 容易 理解 ， 它 只 是 将 主 栏 部 分 分 成 一 个 个 的 段落 ， 那 么 对 于 这 样 的 段 
设计 样式 表 时 只 要 注意 将 文本 标题 和 文本 段落 修饰 好 即 可 。 它 的 样式 表 如 程序 17.8 所 示 。 


【代码 17-8】 页 面 右 侧 主 栏 的 样式 表 ， 其 源码 展示 如 下 : 
程序 17.8 页面 右 侧 主 栏 的 样式 表 


01 #supportingText{ padding : 0; // 定 义 右 侧 第 一 栏 的 样式 
02 margin : -3px 0 40px 0; 

03 background : #d6e6b6; 

04 border : 1px solid white; 

05 width : 469px; 

06 float : right; 

07 } 

08 #supportingText p { margin : 9px 17px 17px 24px; 

09 } 

10”#explanation h3 { background : url(hdr_about.gif) no-repeat /放置 右 侧 第 一 栏 的 标题 图 像 
11 width : 469px; 

用 height : 32px; 

13 margin : 0; 

14 padding : 0; 

15 } 

16 #explanation h3 span { display : none; /隐藏 对 象 

17 } 

18 #participation h3 { background : url(hdr_participation.gif) no-repeat; // 定 义 右 侧 第 二 栏 的 样式 
19 width : 469px: 

20 height : 32px; 

21 margin : 0; 

> padding : 0; 

23 hn 

24 #participation h3 span { display : none; /隐藏 对 象 

25 ) 

26 #benefits h3 { background : url(hdr_benefits.gif) no-repeat; 。“// 定 义 右 侧 第 三 栏 的 样式 
27 width : 469px; 

28 height : 32px; 

29 margin : 0; 

30 } 

31 #benefits h3 span { display : none; 

32 pr 

33 #7requirements h3 { background : url(hdr_requirements.gif) no-repeat; 

34 width : 469px; 

35 height : 32px; 

36 margin : 0; 
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37 padding : 0; 

38 下 

39 #requirements h3 span { display : none; /隐藏 对 象 
40 } 

41 #footer {background :#a2c1b9; 

42 border-top : 1px solid white; 

43 padding : 0 0 2px 24px; 

34 上 


【深入 学 习 】supportingText 样式 表 划 分 了 主 栏 在 页 面 中 的 位 置 ， 以 及 一 些 基本 的 属性 ， 如 背景 颜 
色 和 边框 的 样式 。supportingText p 样式 表 则 定义 了 主 栏 文本 的 位 置 属性 ， 即 在 框 模型 中 是 处 于 一 个 怎 
样 的 位 置 。 另 外 可 以 看 到 ，#explanation h3、#participation h3、#benefits h3 和 #requirements h3 这 4 个 样 
式 表 是 用 来 定义 4 段 文本 的 标题 ， 而 这 个 标题 使 用 的 是 图 像 来 替代 文本 标题 ， 文 本 则 被 隐藏 。 最 后 一 
个 footer 样式 表 只 是 简单 地 定位 了 页 脚 的 样式 ， 那 么 到 这 里 ， 整 个 页 面 就 完成 了 。 


注意 : 第 10 行 通过 url 来 指定 图 片 地 址 。 


【运行 程序 】 现 在 让 我 们 来 揭示 本 章 开头 图 17.1 的 最 后 一 层面 纱 ， 这 个 页 面 最 终 的 显示 效果 如 
图 17.4 所 示 。 


图 17.4 ”最终 页 面 的 效果 


17.3 .在 结 


设计 页 面 并 不 是 很 难 的 一 门 学 问 ， 关键 在 于 能 够 细心 认真 地 处 理 好 每 一 个 细节 ， 对 设计 保持 热情 ， 
这 才 是 保证 一 个 设计 者 拥有 不 断 创作 灵感 的 源泉 。 当 然 ， 做 到 一 个 优秀 的 设计 师 没 有 什么 捷径 可 走 ， 
只 有 通过 大 量 的 训练 才能 练 就 良好 的 制作 感觉 ， 才 能 成 为 一 个 出 色 的 前 端 页 面 设计 师 。 
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学 习 了 关于 CSS 布局 页 面 的 方法 后 ， 如 果 要 更 好 地 使 用 各 种 属性 ， 进 行 页 面 元 素 的 控制 ， 就 要 不 
断 地 实践 。 本 章 主要 的 内 容 是 讲解 一 个 完整 的 站 点 首页 和 一 个 二 级 页 面 的 制作 。 目 的 是 通过 实例 ， 讲 
解 站 点 制作 的 步骤 和 注意 的 技巧 。 通 过 本 章 的 学 习 ， 重 点 要 掌握 编写 代码 的 方式 、 作 站 点 的 流程 、 站 
点 结构 和 样式 的 规划 等 知识 。 

本 章 的 主要 知识 点 如 下 。 

口 ”构思 页 面 的 布局 。 

口 ”页面 的 切 图 。 

口 ”制作 页 面 的 顺序 。 

口 “二 级 页 面 的 制作 。 

【本 节 示 例 参考 ; 资料 光盘 \ 第 18 章 】 


18.1 分 析 效 果 图 


该 实例 是 为 了 让 读者 更 清楚 使 用 CSS 进行 整 站 布局 的 方法 ， 所 以 这 里 只 介绍 站 点 首页 和 一 个 二 级 
页 面 的 制作 方法 。 其 中 ， 站 点 首页 的 效果 图 如 图 18.1 所 示 。 


图 18.1 站 点 首页 的 效果 图 


CSS pat 


一 个 二 级 页 面 的 效果 图 如 图 18.2 所 示 。 


图 18.2 站 点 二 级 页 面 的 效果 图 


从 图 18.1 和 图 18.2 可 以 看 出 ， 首 页 和 二 级 页 面 的 头 部 、 左 侧 和 底部 是 相同 的 ， 右 侧 部 分 的 宽度 和 
内 容 是 不 同 的 ， 中 间 的 内 容 部 分 也 有 很 大 的 区 别 。 下 面 分 别 进行 分 析 。 

1. 首页 效果 图 的 分 析 

从 图 18.1 可 以 看 出 ， 此 时 首页 在 纵向 可 以 分 为 3 个 部 分 : 头 部 (包括 logo 部 分 和 导航 ) 、 内 容 部 
分 、 底 部 。 其 中 ， 中 间 内 容 部 分 又 可 以 分 为 3 个 部 分 : 左 侧 的 服务 和 新 闻 部 分 、 中 间 内 容 部 分 、 右 侧 
关于 我 们 部 分 。 

2. 二 级 页 面 的 分 析 

二 级 页 面 和 首页 的 结构 基本 相同 ， 其 中 区 别 在 于 ， 右 侧 部 分 的 宽度 和 首页 有 差别 。 


18.2 切 图 


分 析 完 页 面 结构 之 后 ， 就 是 切 图 的 制作 。 其 内 容 包 括 文本 的 隐藏 、 切 片 的 选择 、 保 存 格 式 等 儿 个 
方面 。 下 面 进行 详细 的 讲解 。 


18.2.1 ”制作 首页 的 切 图 


在 制作 切 图 时 ， 首 先 要 区 分 出 页 面 的 内 容 和 修饰 部 分 。 然 后 分 析出 哪些 修饰 部 分 是 可 以 用 CSS 代 
码 来 实现 的 ， 哪 些 部 分 是 可 以 用 重复 背景 来 实现 的 ， 最 后 要 切 出 需要 知道 详细 宽度 的 部 分 。 在 制作 切 
图 时 , 最 好 把 修饰 背景 上 的 文本 内 容 去 掉 , 同时 尽量 减少 图 片 文件 的 数量 。 制作 好 的 首页 切片 如 图 18.3 
所 示 。 
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图 18.3 首页 的 切片 


从 图 18.3 可 以 看 出 ， 切 片 中 作为 背景 使 用 的 大 多 是 圆 角 框 的 部 分 和 含有 渐变 颜色 的 部 分 。 其 中 使 
用 单纯 一 种 颜色 的 部 分 , 可 以 用 CSS 来 实现 。 具体 哪些 修饰 部 分 使 用 背景 图 片 , 哪些 修饰 部 分 使 用 CSS 
制作 ， 将 在 后 面 的 章节 中 详细 介绍 。 


注意 ; 切 好 图 后 ， 将 切片 保存 到 磁盘 相应 的 位 置 。 要 注意 的 问题 是 ， 将 内 容 部 分 的 图 片 和 
颜色 复杂 的 背景 图 片 保存 成 JPEG 的 格式 。 


18.2.2 ”二 级 页 面 的 切 图 


从 首页 和 二 级 页 面 的 结构 可 以 知道 ， 此 时 二 级 页 面 需要 重新 切 图 的 地 方 并 不 多 。 其 切 图 的 主要 目 
的 是 ， 切 出 两 个 内 容 图 片 ， 同 时 确定 内 容 各 个 部 分 的 宽度 。 其 切 图 后 的 效果 如 图 18.4 所 示 。 


图 18.4 二 级 页 面 的 切 图 
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切 好 图 后 ， 新 建 一 个 站 点 ， 然 后 把 将 页 面 中 使 用 到 的 图 片 放 入 images 文件 夹 中 。 图 片 的 命名 可 以 
保留 原 有 的 命名 ， 也 可 以 重新 命名 ， 重 新 命名 的 目的 就 是 使 图 片 的 名 称 更 容易 理解 。 


18.3 制作 站 点 首页 头 部 


切 完 图 ， 新 建 了 站 点 做 好 准备 工作 后 ， 就 可 以 开始 制作 页 面 了 。 同 前 面 章节 的 实例 制作 一 样 ， 要 
将 整个 页 面 分 成 几 个 部 分 进行 制作 ， 下 面 分 别 进行 讲解 。 


18.3.1 首页 头 部 的 信息 和 基础 样式 的 制作 
【代码 18-1】 首先 制作 页 面 头 部 信息 ， 主 要 包括 页 面 标题 等 ， 其 代码 如 程序 18.1 所 示 。 


程序 18.1 主页 头 部 信息 


01 <!IDOCTYPE html PUBLIC "-WW3CWDTD XHTML 1.0 Transitiona//EN" 
02 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

03 ”<html xmlns="http://www.w3.org/1999/xhtml"> 

04 <head> 

05 <metaname="robots" content="all" /> 

06 <metaname="author" content="" /> 

07 <meta name="Copyright" content="banquan" /> 

08 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
09 <meta name="description" content="" /> 

10 <meta content="" name="keywords" /> 

11 <title>Home</title> 

12 <link href="style/main.css" type="text/css" rel="stylesheet" /> 

13 <link rel="icon" href=" type="image/x-icon" /> 

14 <link rel="shortcut icon" href="" type="image/x-icon" /> 

15 </head> 


【深入 学 习 】 在 链接 样式 的 语句 后 面 ， 第 13、14 行 增加 了 两 个 link 元 素 ， 其 目的 是 制作 收藏 夹 图 标 。 


| ee 


【代码 18-2】 接 下 来 制作 页 面 的 基础 样式 ， 其 代码 如 程序 18.2 所 示 。 
程序 18.2 页 面 的 基础 样式 


01 六 基础 样式 */ 

02 

03 所 

04 margin: Opx; 

05 padding: Opx:; 

06 font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif; /* 定 义 页 面 使 用 的 字体 */ 
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07 Color:#58595B; 

08 font-size:11px; 

09 list-style-type: none; 

10 text-decoration: none;} 

11 body{ 

12 height: 100%; 

13 background-color:#5c5c5c;} 让 定义 页 面 背 景色 */ 
14 img{ 

15 border:none;} 

16 at 让 定义 页 面 链 接 的 样式 */ 
17 Color: #ffffff; 

18 text-decoration: none;} 

19 a:link{ 

20 text-decoration:none;} 

21 a:hover{ 

22 text-decoration: underline;} 
23 form{ 

24 margin: Opx; 

25 padding: Opx;} 

26 .clear{ 

27 line-height: 1px; 

28 Clear:both; 

29 visibility:hidden;} 


【深入 学 习 】 在 第 3 一 10 行 代码 的 基础 样式 中 定义 了 字体 、 页 面 的 背景 颜色 和 相关 各 个 页 面 元 素 
的 初始 样式 ， 同 时 取消 了 可 能 存在 兼容 问题 的 元 素 的 补 白 和 边界 。 其 他 都 是 普通 样式 的 定义 ， 非 常 简 
单 ， 这 里 不 再 详 述 。 


说 明 : 第 15 行 的 border:none， 表 示 没 有 控件 和 边框 。 


18.3.2 首页 头 部 的 分 析 


首先 还 是 对 首页 头 部 的 效果 图 进行 分 析 ， 其 目的 是 区 分 页 面 中 内 容 和 修饰 的 部 分 。 头 部 的 效果 图 
如 图 18.5 所 示 。 


HOME | ABOUT US | SERVICES | NEWSROOM | SUPPORT | OTHER PLACE 


图 18.5 页 面 头 部 的 效果 图 


01° 


二 ”TML+CSS 网 页 设计 指南 


从 图 18.5 可 以 看 出 ， 头 部 主要 分 为 两 个 部 分 ， 其 中 导航 列表 以 上 的 部 分 可 以 用 背景 图 片 的 方式 实 


现 。 导 航 菜单 部 分 ， 左 侧 可 以 用 一 个 贺 
现 。 每 个 导航 内 容 之 间 的 白色 分 隔 线 ， 可 以 用 


18.3.3 首页 头 部 结构 的 制作 


角 图 片 


埋 时 要: 


尽头 


二 时. 


日 
月 和 囚 


现 ， 其 余部 分 可 以 用 一 个 重复 的 渐变 背景 图 片 实 
图 片 来 实现 ， 也 可 以 采用 页 面 添加 代码 实现 。 


【代码 18-3】 在 制作 头 部 之 前 ,分析 一 下 现在 页 面 所 要 显示 的 效果 .此 时 页 面 定 义 背景 色 为 #5c5c5c 
(一 种 灰色 ) ， 而 从 效果 图 可 以 看 出 ， 页 面 的 主体 部 分 的 背景 是 白色 。 所 以 首先 要 增加 一 个 用 于 显示 


背景 颜色 的 父 元 素 。 下 面 将 头 部 分 成 header 和 menu 两 个 部 分 ， 


分 别 制作 ， 其 代码 如 程序 18.3 所 示 。 


程序 18.3 header 和 menu 部 分 


01 <divid="main"> <! 一 显示 白色 背景 的 元 素 --> 
02 <I-head--> 

03 <div id="header'> <!-- 头 部 logo 和 banner 所 在 的 部 分 
--> 

04 <div class="link"> 

05 <a href="#">SiteMap </a>| <a href="#">Contact Us </a></div></div> 

06 <divid="menu"> <! 一 导航 列表 开始 --> 
07 <div class="menulist"> 

08 <div class="menucontent"> 

09 <ul id="nav"> 

10 <li><a href="#">HOME </a></li> 

11 <li>|</li> <! 一 分 隔 线 的 部 分 一 > 
<li><a href="#">ABOUT &amp; US</a></li> 

13 <li>|</li> 

14 <li><a href="#">SERVICES </a> 

15 <li>|</li> 

16 <li><a href="#">NEWSROOM </a></li> 

你 <li>|</li> 

18 <li><a href="#">SUPPORT </a></l> 

19 <li>|</li> 

20 <li><a href="#">OTHER PLACE </a></li></ul> </div> 

21 </div><div class="menuleft"></div> 

22 <div class="clear"></div></div></div> 


【深入 学 习 】 第 3 一 5 行 定义 了 header 部 分 ， 这 


里 只 定义 了 两 个 链接 。 第 6 一 22 行 定义 了 menu 部 


分 ， 其 中 包含 一 个 列表 ， 列 表 项 都 是 一 些 导 航 链接 。 


景 图 片 ， 读 者 可 以 尝试 使 用 背景 图 片 来 实现 。 


说 明 : 其 中 ，menulist 元 素 用 来 显示 导航 列表 的 背景 
侧 圆 角 ， 分 隔 各 个 导航 内 容 的 “|”， 其 实 是 一 个 修饰 部 分 。 按 照 CSS 布局 的 本 质 来 看 ， 应 该 制作 成 背 


menuleft 元 素 用 来 制作 导航 列表 左 
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18.3.4 首页 头 部 CSS 代码 的 编写 


制作 完 页 面 结构 之 后 ， 就 可 以 编写 CSS 部 分 了 。 在 编写 CSS 部 分 时 ， 如 果 发 现 结构 部 分 存在 不 合 
理 的 地 方 ， 要 及 时 修改 。 
1. main 部 分 的 样式 
main 部 分 的 样式 主要 作用 是 ,制作 页 面 白色 的 背景 和 除 顶 部 以 外 的 白色 边界 。 有 具体 代码 如 下 所 示 : 
#main{ 
Width:820px; 
margin:0 auto; 
background-color-#Ffffff:} 
2. header 部 分 的 样式 
header 部 分 的 样式 主要 用 来 显示 头 部 的 背景 图 片 ， 同 时 还 要 控制 元 素 的 居中 显示 ， 所 以 要 定义 元 
素 的 margin 属性 和 合适 的 高 度 、 宽 度 。 同时 , 由 于 在 header 部 分 存在 着 两 个 导航 文本 , 所 以 要 控制 link 
元 素 的 位 置 ， 使 导航 的 文本 显示 在 正确 的 位 置 上 。 有 具体 代码 如 下 所 示 : 
#header{ 
Width:790px; 
height:155px; 
margin:0 auto; /* 定义 居中 */ 
background:url(../images/top.jpg) no-repeat right top;} 六 添加 背景 */ 
Jinkf 
float:right; 
margin:5px 5px 0 0; /* 精确 控制 链接 文本 的 位 置 */ 
Color-#ffffff:} 


定义 完 以 上 样式 后 ， 页 面 的 显示 效果 如 图 18.6 所 示 。 


图 18.6 定义 了 头 部 样式 后 的 显示 效果 


从 图 18.6 可 以 看 出 ， 此 时 头 部 已 经 显示 正常 了 ， 但 是 下 面 导航 列表 的 文本 却 没 有 了 。 这 是 由 于 在 
基础 样式 中 定义 链接 的 颜色 为 白色 ， 同 时 页 面 的 背景 颜色 也 是 白色 造成 的 。 
3. menu 部 分 的 样式 
【代码 18-4】menu 部 分 包括 两 个 部 分 ， 一 个 是 左 侧 的 圆 角 框 ， 另 一 个 是 导航 列表 部 分 。 具 体 代 码 
如 程序 18.4 所 示 。 
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程序 18.4 ” menu 部 分 的 样式 


01 #menuf{ 
02 Width:790px:; 
03 margin:0 auto; 启 居中 显示 */ 


04 padding:10px 0 5px 0:} 

05 .menulist{ 

06 width-620px: 

07 float:right; 

08 height:28px; 

09 background:url(../images/index_20.gif) repeat-x;} * 添加 列表 背景 */ 
10 .menuleft{ 

11 float:right; 

12 width:13px; 

13 height:28px; 

14 background:url(../images/index_19.gif) no-repeat} 六 添加 圆 角 */ 

15 .menucontent ul li{ /* 定义 分 隔 线 颜色 和 列表 同行 显示 */ 
16 Color:##fffff; 

17 font-weight:bold; 

18 float:left; 

19 margin:5px 0 0 10px;} 

20 .menucontent ullia{ 


21 font-weight:bold; A* 文本 的 加 粗 */ 

22 Color-#ffffff; 

23 margin-bottom:7px; 六 导航 内 容 链接 的 精确 定位 */ 
24 font-size:13px;} 

25 #nav{ 

26 margin-left:20px; /* ul 的 精确 定位 */ 

227 line-height: 16px; 

28 list-style-type: none; 

29 font-size:14px;} 


【深入 学 习 】 上 述 代 码 中 ， 首 先 要 定义 的 就 是 menu 元 素 的 宽度 和 居中 。 接 着 要 使 导航 列表 处 于 
menu 元 素 的 右 侧 ， 所 以 还 要 使 用 浮动 属性 控制 导航 元 素 的 位 置 。 


说 明 : 为 了 精确 定位 列表 的 位 置 ， 还 要 使 用 相应 的 补 白 和 边界 属性 。 同 时 还 要 定义 导航 列 


表 的 链接 样式 ， 使 导航 文本 能 够 正常 显示 。 


【运行 效果 】 定 义 了 以 上 样式 后 ， 页 面 的 显示 效果 如 图 18.7 所 示 。 
这 样 首页 的 头 部 就 制作 完成 了 ， 接 下 来 制作 首页 的 主体 部 分 。 
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HOME | ABOUT & US | SERVICES | NEWSROOM | SUPPORT | OTHER PLACE 


18.7 定义 完 导航 部 分 样式 后 的 显示 效果 
18.4 制作 首页 的 主体 部 分 
首页 的 主体 部 分 可 以 分 为 3 个 部 分 ， 分 别 是 左 侧 服务 和 新 闻 部 分 、 中 间 内 容 部 分 、 右 侧 的 关于 我 
们 和 欢迎 部 分 。 下 面 分 别 讲解 它们 的 制作 过 程 。 


18.4.1 分 析 主 体 部 分 效果 图 


在 制作 之 前 ， 同 样 先 要 分 析 一 下 效果 图 ， 分 清 页 面 中 的 内 容 和 修饰 部 分 。 主 体 部 分 的 效果 图 如 
图 18.8 所 示 。 


Search 六 型 
图 中 About Us 
rr | 8 gg el 
看 our webal Il be 


Volcope'to Ramon 


18.8 主体 部 分 的 效果 图 


从 图 18.8 可 以 看 出 ， 左 侧 内 容 分 为 3 个 部 分 ， 分 别 为 搜索 部 分 、 服 务 部 分 和 新 闻 部 分 。 中 间 内 容 
分 为 两 个 部 分 ， 分 别 为 展示 图 片 部 分 和 分 类 服务 部 分 。 右 侧 也 可 以 分 为 两 个 部 分 ， 关 于 我 们 部 分 和 欢 
迎 图 片 部 分 。 所 以 可 定义 3 个 浮动 元 素 分 别 布局 这 3 部 分 内 容 。 
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18.4.2 制作 主体 左 侧 部 分 的 结构 
主体 左 侧 部 分 的 结构 可 以 分 为 下 面 3 个 部 分 来 制作 。 
1. 搜索 部 分 的 结构 
【代码 18-5】 搜 索 部 分 ， 主 要 由 一 个 文本 框 和 一 个 按钮 构成 。 具 体 结构 如 程序 18.5 所 示 。 
程序 18.5 ”清除 浮动 的 元 素 


01 <divid="content"> 


02 <!- 

03 <div class="left"> 

04 <div class="search"> 

05 <form name="name1" action="" > 

06 <input type="text" size="20" name="" value="" class="botton_left"/> 

07 <input type="image" src="images/index_33.gif" name="" class="botton" /></form> 
08 <div class="clear"></div> <!-====== 清 除 浮动 元 素 ========--> 

09 </div> 


10 </div></div> 
【深入 学 习 】 第 6 行 是 一 个 文本 框 ， 第 7 行 是 一 个 图 像 按 钮 ， 第 8 行 用 来 清除 浮动 元 素 。 


Tt 注意 : 为 了 控制 同行 显示 ， 要 使 用 浮动 属性 ， 为 了 兼容 Firefox 浏览 器 ， 所 以 还 要 添加 清除 
浮动 的 元 素 。 


2. 服务 列表 部 分 的 结构 


【代码 18-6】 服 务 列表 部 分 主要 由 顶部 的 圆 角 、 列 表 标 题 和 列表 内 容 构 成 。 具 体 结构 如 程序 18.6 
所 示 。 


程序 18.6 服务 列表 


01 <divclass="services_lefttop"></div> 


02 <div class="services_lefttitle"><span class="titlewhite"><a href="#">Services</a></span></div> 
03 <div class="services_leftcontent"> 

04 <ul> 

05 <li><a href="#">Service class one</a></li> 

06 <li><a href="#">Service class two</a></li> 

07 <li><a href="#">Service class three</a></li> 

08 <li><a href="#">Service class four</a></li> 

09 <li><a href="#">Service class five</a></li> 

10 <li><a href="#">Service class six</a></li></ul></div> 


【深入 学 习 】 第 5 一 10 行使 用 了 一 个 列表 项 ， 其 中 设置 了 6 个 链接 。 
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说 明 : 在 主体 结构 制作 中 ， 将 标题 部 分 分 成 几 种 颜色 进行 独立 控制 ， 所 以 使 用 一 个 span 元 


素来 进行 控制 。 因为 页 面 中 间 部 分 还 有 services 部 分 ， 所 以 在 左 侧 部 分 的 类 名 中 加 入 了 left 字样 用 来 
区 分 。 


3. 新 闻 部 分 的 结构 


【代码 18-7】 新 闻 部 分 也 是 由 标题 和 内 容 两 个 大 部 分 构成 的 ， 其 中 为 了 确定 高 度 和 背景 ， 要 将 内 
容 部 分 放 到 一 个 父 元 素 之 中 。 具 体 代 码 如 程序 18.7 所 示 。 


程序 18.7 新 闻 部 分 
01 <divclass="newstitle"><span class="titlewhite">News</span></div> 


02 <div class="newscontentbig"> 

03 <div class="newscontent > 

04 <div class="newscontenttitle"><a href="#">News Headlines</a></div> 

05 <ahref="#">Here is some news content can be shown in the latest relevant news.</a></div> 
06 <div class="newscontent"> <!--====== 内 容 部 分 第 一 条 新 闻 ==: 
07 <div class="newscontenttitle"><a href="#">News Headlines</a></div> 

08 Hereis some news content can be shown in the latest relevant news.</div> 

09 <div class="newscontent"> <!--====== 重 复 的 新 闻 ========--> 
10 <div class="newscontenttitle"><a href="#">News Headlines</a></div> 

11 Hereis some news content can be shown in the latest relevant news.</div> 

4 <div class="newscontent"> 

13 <div class="newscontenttitle"><a href="#">News Headlines</a></div> 


14 Hereis some news content can be shown in the latest relevant news.</div></div> 


【深入 学 习 】 第 4 一 6 行 是 内 容 部 分 第 一 条 新 闻 。 所 有 的 新 闻 都 放 在 一 个 名 为 newscontentbig 的 div 
层 中 。 


18.4.3 制作 主体 左 侧 部 分 的 样式 
与 结构 部 分 相对 应 ， 样 式 部 分 也 分 为 3 个 主要 部 分 。 在 制作 具体 样式 之 前 ， 首 先 要 制作 页 面 父 元 
素 的 样式 。 
1. content 和 left 元 素 的 样式 
【代码 18-8】 在 content 元 素 中 ， 主 要 定义 元 素 的 宽度 和 居中 属性 ， 使 主体 内 容 部 分 和 头 部 对 齐 。 
left 部 分 定义 左 侧 内 容 的 宽度 。 具 体 样式 如 程序 18.8 所 示 。 
程序 18.8 ”content 和 left 元 素 的 样式 


01 #content{ 
02 Width:790px:; 
03 margin:0 auto 16px; 
04 padding-top:5px;} 
05 .left{ 
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06 float:left: 让 浮动 属性 进行 定位 */ 
07 width:191px;} 
2. 标题 部 分 样式 


【代码 18-9】 标 题 部 分 样式 , 分 别 定义 在 tilewhite 和 titlered 两 个 类 选择 符 中 。 上 有 具体 样式 如 程序 18.9 
所 示 。 


程序 18.9 ”标题 部 分 样式 


01 .titlewhite{ 

02 margin-left:18px; 

03 font-size:14px; 

04 Color-#FFFFff; 

05 font-weight:bold; 

06 font-family: "Times New Roman", Times, serif} "定义 标题 的 字体 */ 

07 .titlewhite af /定义 标题 含有 链接 时 的 样式 */ 
08 font-size:14px; 

09 font-weight:bold; 


10 font-family: "Times New Roman", Times, serif} 
11 .titlered{ 

12 margin-left:15px; 

13 font-size:14px; 

14 font-weight:bold; 

15 color:#cc0000; 

16 font-family: "Times New Roman", Times, serif:} 
3. 搜索 部 分 样式 


【代码 18-10】 搜 索 部 分 的 样式 主要 定义 表单 的 位 置 、 文 本 框 的 大 小 、 按 钮 与 文本 框 的 间隔 等 属性 。 
具体 代码 如 程序 18.10 所 示 。 


程序 18.10 ”搜索 部 分 样式 


01 .search{ 

02 margin-bottom:8px; 让 定义 搜索 部 分 与 下 面 内 容 的 间隔 */ 
03 width:191px;} 

04 .search input{ /定义 左 侧 的 间隔 */ 


05 margin-left:-5px; 
06 height:18px;} 
07 .botton_left{ 


08 float:left; /定义 浮动 属性 控制 元 素 的 位 置 */ 
09 display:block;} 

10 .botton{ 

11 float:left; 


12 margin:0 0 4px 2px;} 
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4. 服务 列表 部 分 样式 


【代码 18-11】 服 务 列表 部 分 样式 主要 包括 定义 头 部 国 角 、 标 题 和 列表 。 其 中 包括 列表 的 位 置 、 
间隔 、 字 体 、 链 接 等 样式 。 具 体 样式 如 程序 18.11 所 示 。 


程序 18.11 服务 列表 部 分 样式 


01 .services_ lefttop{ 

02 width:191px; 

03 background:url(../images/index_37.gif) no-repeat:; 让 定义 头 部 圆 角 */ 
04 background-color-##ffffff; 

05 height:5px; 

06 font-size:0;} A 取消 默认 高 度 */ 
07 .services lefttitle{ 

08 background-color:#006699; 


09 height:20px;} 让 标题 部 分 的 高 度 */ 

10 .services_leftcontent{ 

11 background-color:#eQedf3; "定义 服务 列表 的 背景 */ 

12 height:140px; /定义 服务 列表 的 高 度 */ 

13 padding:10px 0 14px 10px:} 让 内 容 与 顶部 和 底部 的 间隔 */ 
14 .services_leftcontent li{ 

15 margin-bottom: 10px; ”列表 内 容 的 间隔 */ 


16 font-size:12px; 

17 padding-left:20px; 

18 background:url(../images/ar.gif) no-repeat left} /列表 背景 %/ 
19 .services_leftcontent li af 

20 color:#539CC0; 

21 font-size:12px;} 


【深入 学 习 】 在 这 部 分 的 样式 中 ， 要 注意 的 是 关于 宽度 的 部 分 ， 要 保证 内 容 的 宽度 不 超过 父 元 素 
的 宽度 ， 和 否则 会 导致 页 面 的 变形 。 一 个 可 行 的 技巧 是 ， 尽 量 少 定义 子 元 素 的 宽度 ， 而 使 用 补 白 和 边界 
属性 进行 元 素 的 定位 。 因 为 在 水 平方 向 上 ， 默 认 的 宽度 和 边界 会 自动 填 满 元 素 的 内 容 。 


| 注意 : 在 列表 中 ， 使 用 背景 和 补 白 属性 显示 列表 前 修饰 图 片 的 技巧 。 


5. 新 闻 部 分 样式 


【代码 18-12】 新 闻 的 标题 部 分 和 服务 部 分 基本 相同 ， 采 用 背景 颜色 的 方式 来 修饰 。 同 时 在 新 闻 内 
容 部 分 的 父 元 素 中 定义 合适 的 高 度 ， 用 来 显示 新 闻 部 分 的 背景 。 在 新 闻 每 一 条 内 容 中 ， 用 定义 边框 的 
样式 来 进行 分 隔 。 具 体 样式 如 程序 18.12 所 示 。 


程序 18.12 ”新 闻 部 分 样式 


01 .newstitle{ 
02 width:181px; 让 注意 宽度 的 计算 */ 
03 margin:16px 0 0; 定义 标题 与 上 面 内 容 的 间隔 */ 
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04 background-color:#006699; 

05 padding:5px;} 

06 .newscontentbig{ 

07 width:184px; 

08 height:327px; 

09 padding:5px 0 3px 7px; 定义 边界 与 内 容 的 间隔 */ 
10 background-color#CDE3EC:} 

11 .newscontent{ 

12 Width:177px; 

13 border-top:#666666 1px dashed; * 定 义 虚线 分 隔 内 容 */ 
14 padding:3px 0 20px 0; 

15 line-height:16px;} 

16 .newscontent a{ 

bs Color:#58595B;} 

18 .newscontenttitle af 

19 text-decoration:underline; 让 新 的 链接 样式 */ 

20 Color:#024592; 

21 font-weight:bold;} 


【深入 学 习 】 此 时 ， 左 侧 新 闻 内 容 的 具体 高 度 并 不 能 确定 ， 因 为 要 保证 左 侧 内容 、 中 间 内 容 和 右 
侧 内 容 的 高 度 相 同 ， 最 终 的 高 度 确定 ， 要 等 待 其 他 两 个 部 分 的 内 容 确 定 后 才能 确定 。 
【运行 效果 】 定 义 了 以 上 样式 后 ， 页 面 的 显示 效果 如 图 18.9 所 示 。 
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图 18.9 定义 左 侧 内 容 后 的 显示 效果 
18.4.4 制作 主体 中 间 部 分 的 结构 
主体 中 间 部 分 的 结构 可 以 分 为 两 个 部 分 : 展示 图 片 部 分 和 服务 分 类 部 分 。 
1， 展 示 图 片 部 分 的 结构 


【代码 18-13】 展 示 图 片 部 分 的 结构 比较 简单 ， 可 以 不 用 任何 包含 元 素 ， 直 接 放 在 middle 元 素 之 
中 , 不 过 由 于 img 元 素 是 内 联 元 素 , 所 以 还 要 增加 一 个 附加 的 clear 元 素 (或 者 定义 展示 图 片 为 块 元 素 ) 
来 换行 显示 。 具 体 的 代码 如 程序 18.13 所 示 。 
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程序 18.13 ”展示 图 片 部 分 的 结构 


01 <divclass="middle"> 


02 <img src="images/show.jpg" class="middle_show" alt="pic" /> 
03 <div class="clear"></div> 
04 </div> 


| 的 表 基部 分 所 以 不 要 定义 在 img 元 素 中 。 


2. 服务 展示 部 分 


【代码 18-14】 服 务 展 示 部 分 主要 由 几 个 重复 的 部 分 组 成 。 其 中 为 了 制作 各 个 展示 内 容 之 间 的 分 
隔 线 ， 将 5 个 展示 的 内 容 分 成 3 类 ， 左 侧 内 容 、 右 侧 内 容 和 底部 中 间 内 容 。 每 个 展示 部 分 的 图 片 、 标 
题 和 内 容 ， 都 使 用 相同 的 样式 。 上 有 具体 代码 如 程序 18.14 所 示 。 


程序 18.14 ”服务 展示 部 分 


01 <divclass="middletitle"><span class="titlered">Services</span></div> 


02 <div class="middlecontentbig"> 

03 <!—==: === 服 务 部 分 左 侧 内 容 ================= 一 > 

04 <div class="middleleft"> 

05 <img src="images/pic1.jpg" width="81" height="81" alt="pic" /> 

06 <div class="piccontent"> 

07 <div class="pictitle"><a href="#">Scenic Display </a> </div> 

08 <a Et is a scenic display of the pictures.</a> </div></div> 
09 ! ==: 

10 <div class="middleright"> 

11 <img src="images/pic2.jpg" width="81" height="81" alt="pic" /> 

12 <div class="piccontent"> 

13 <div class="pictitle"><a href="#">Scenic Display </a> </div> 

14 <a href="#">Here is a scenic display of the pictures.</a></div></div> 
15 <div class="clear"></div> 

16 

17 <!--= = 服务 部 分 重复 内 容 =: 

18 <div class="middleleft"> 

19 <img src="images/pic3.jpg" width="81" height="81" alt="pic" /> 

20 <div class="piccontent"> 

21 <div class="pictitle"><a href="#">Scenic Display </a></div> 

pad <a href="#">Here is a scenic display of the pictures.</a></div></div> 

23 <div class="middleright"> 

24 <img src="images/pic4.jpg" width="81" height="81" alt="pic" /> 

25 <div class="piccontent > 

26 <div class="pictitle"><a href="#">Scenic Display </a></div> 

27 <a href="#">Here is a scenic display of the pictures.</a></div></div> 
28 <div class="clear"></div> 
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29 

30 <I-============ 服 务 部 分 底部 居中 的 内 容 =================--> 
31 <div class="middlecenter"> 

32 <img src="images/pic5.jpg" width="81" height="81" alt="pic" /> 

33 <div class="piccontentcenter > 

34 <div class="pictitle"><a href="#">Scenic Display </a></div> 

35 <a href="#">Here is a scenic display of the pictures.</a></div> 

36 <div class="clear"></div></div> 

37 </div> 


【深入 学 习 】 这 个 部 分 的 页 面 内 容 比较 多 ， 其 实 并 不 复杂 。 因 为 每 个 服务 项 目 展示 的 部 分 ， 都 是 
由 图 片 、 图 片 标题 和 图 片 内 容 3 个 部 分 组 成 的 。 在 此 基础 上 ， 将 同样 结构 的 内 容 分 别 放 在 不 同 的 容器 
中 ， 就 构成 了 服务 展示 部 分 的 页 面 了 。 


18.4.5 制作 主体 中 间 部 分 的 样式 


对 应 中 间 部 分 的 结构 ， 样 式 部 分 也 可 以 分 为 两 个 部 分 来 讲解 。 在 制作 具体 内 容 之 前 ， 依 然 先 定义 
父 元 素 的 样式 。 
1. 定义 middle 元 素 的 样式 


【代码 18-15】 因 为 首页 和 其 他 级 别 页 面 中 间 部 分 的 宽度 是 不 同 的 ， 所 以 此 时 可 以 不 定义 middle 
元 素 的 宽度 ， 而 只 定义 它 的 浮动 属性 ， 此 时 middle 元 素 的 宽度 由 它 所 包含 的 元 素 决定 。 具 体 样 式 如 程 
序 18.15 所 示 。 


程序 18.15 新 闻 部 分 样式 


01 .middle{ 

02 float:left; 

03 margin-left:18px;} 
04 .middle a{ 

05 Color:#58595b;} 


5 说 明 : 该 样式 中 ， 定 义 margin 属性 的 目的 是 使 middle 元 素 中 的 内 容 部 分 与 左 侧 内 容 之 间 


分开 定 的 距离 ， 同 时 定义 了 中 间 部 分 链接 的 样式 。 


2. 定义 展示 图 片 的 样式 
【代码 18-16】 展 示 图 片 的 样式 主要 是 定义 图 片 的 宽度 和 高 度 。 样 式 如 程序 18.16 所 示 。 


程序 18.16 新 闻 部 分 样式 


01 .middle_show{ 
02 width:390px; 
03 height:227px;} 
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3. 服务 展示 内 容 部 分 
这 个 部 分 的 样式 稍微 复杂 一 点 ， 可 以 分 为 以 下 几 个 部 分 进行 定义 。 
(1) services 标题 部 分 。 
【代码 18-17】services 标题 部 分 是 指 页 面 中 含有 文本 Services 的 部 分 。 样 式 如 程序 18.17 所 示 。 
程序 18.17 ”新 闻 部 分 样式 


01 .middletitle{ 
02 width:390px; 
03 margin:16px 0 8px;} 


说 明 : 该 样式 主要 定义 了 标题 部 分 与 上 面 图 片 和 下 面 内 容 之 间 的 间隔 。 


(2) 3 个 位 置 的 容器 和 其 中 图 片 的 样式 。 
【代码 18-18】 处 在 左 侧 、 右 侧 和 底部 中 间 的 3 个 容器 和 包含 图 片 的 样式 ， 如 程序 18.18 所 示 。 
程序 18.18 ”新 闻 部 分 样式 


01 .middleleft{ 

02 float:left; 

03 padding-bottom:5px; 

04 border-right:#666666 1px dashed; 站 定义 分 隔 线 的 样式 */ 


05 border-bottom:#666666 1px dashed; 

06 width:194px;} 

07 .middle img{ 

08 float:left:} "定义 图 片 的 位 置 */ 

09 .middleright{ 

10 float:left; 

11 padding-bottom:5px; 

12 border-bottom:#666666 1px dashed; 

13 width:194px;} 

14 .middleright img{ 

15 margin-left:10px:} /精确 定义 图 片 与 分 隔 线 间 的 距离 7/ 
16 .middlecenter{ 

17 border-bottom:#666666 1px dashed; 

18 Width:390px:; 

19 line-height:15px; 

20 padding:5px 0 10px:} /控制 图 片 的 精确 位 置 */ 


【深入 学 习 】 这 一 部 分 的 样式 主要 是 定义 各 个 元 素 的 宽度 ， 以 及 其 中 内 容 之 间 的 精确 分 隔 距离 。 
(3) 定义 图 片 标题 和 内 容 的 样式 。 
【代码 18-19】 其 中 图 片 标题 可 以 使 用 一 个 统一 的 样式 ， 由 于 底部 中 间 部 分 的 显示 效果 会 咯 有 不 
同 ， 所 以 单独 定义 。 具 体 样式 如 程序 18.19 所 示 。 
“319 


二 ”TML+CsS 网 页 设计 指南 


程序 18.19 新闻 部 分 样式 


01 .piccontent{ 


02 float:left: 

03 margin:3px auto 4px 10px; /精确 控制 内 容 的 位 置 */ 
04 height:80px; "定义 内 容 的 高 度 */ 

05 line-height:15px;} 

06 .pictitle af 让 重新 定义 链接 的 样式 */ 


07 Color:#58595b; 

08 font-size:11px; 

09 font-weight:bold;} 

10 .piccontentcenter{ 

11 float:left; 

2 Width:295px; 让 定义 底部 中 间 的 独立 显示 效果 */ 
13 margin-left:5px; 

14 height:80px;} 


注意 : 图 片 内 容 和 图 片 的 大 小 都 是 有 限制 的 ， 因 为 此 时 容器 的 高 度 依赖 内 容 的 多 少 ， 过 多 
的 内 容 会 导致 页 面 变 形 。 


图 18.10 定义 了 中 间 内 容 样式 后 的 显示 效果 
18.4.6 ”制作 主体 右 侧 部 分 的 结构 
主体 右 侧 部 分 的 结构 可 以 分 为 两 个 部 分 ， 关 于 我 们 的 部 分 和 欢迎 图 片 的 部 分 。 
1. 关于 我 们 的 部 分 的 结构 


【代码 18-20】 关 于 我 们 的 部 分 的 结构 ， 大 致 可 以 分 为 下 面 几 个 部 分 : 头 部 圆 角 、 标 题 、 内 
更 多 、 底 部 圆 角 。 具 体 的 结构 如 程序 18.20 所 示 。 
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程序 18.20 ”关于 我 们 的 部 分 的 结构 
01 <div class="right"> 


02 <-= === 头 都 国 角 都 分 一 ==========- 一 ===--> 

03 <div class="aboutustop"></div> 

04 < ==== 标 题 部 分 ===== 一 === 一 =====--> 

05 <div class="aboutustitle"><span class="titlered">About Us</span></div> 
06 <I--==: 

07 <div class="aboutuscontent"> 

08 You are welcome to visit our website, we will be dedicated to serving youl 


09 You are welcome to visit our website, we will be dedicated to serving youl 
10 You are welcome to visit our website, we will be dedicated to serving you!</div> 


11 <div class="aboutusmore"> 

12 <div class="more"><a href="#">more<img src="images/index_144.gif" alt="pic" /></a></div> 
13 <div class="clear"></div></div> 

14 <!--============ 底 部 圆 角 =================--> 

15 <div class="aboutusbottom"></div> 

16 </div> 


【深入 学 习 】 这 里 通过 div 分 出 页 面 主体 右 侧 部 分 的 结构 ， 上 面 已 经 介绍 了 包括 哪些 结构 ， 这 里 
只 是 提醒 读者 ， 底 部 圆 角 是 通过 样式 来 实现 的 。 


注意 : 为 了 在 Firefox 浏览 器 中 能 够 显示 相同 的 效果 ， 在 可 能 用 到 浮动 属性 的 地 方 增 加 了 清 


除 浮动 的 元 素 。 


2. 欢迎 图 片 的 部 分 


【代码 18-21】 欢 迎 图 片 部 分 的 结构 ， 相 对 来 说 要 简单 得 多 ， 只 有 一 个 图 片 部 分 和 一 个 欢迎 文本 
部 分 。 具体 结 构 如 程序 18.21 所 示 。 


程序 18.21 欢迎 图 片 的 部 分 


01 ”<I-============ 欢 迎 图 片 ================ = 
02 <div class="welcomepic"><img src= 

03 “<I--====: 

04 

证 一 一 一 一 一 一 一 一 一 

06 <div class="clear"></div> 


注意 : 因为 主体 内 容 左 侧 、 中 间 、 右 侧 3 个 部 分 的 定位 中 都 使 用 了 浮动 属性 ， 所 以 在 最 后 


还 要 添加 一 个 清除 浮动 的 元 素 ， 保 证 页 面 在 Firefox 浏览 器 中 正常 显示 。 
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18.4.7 ”制作 主体 右 侧 部 分 的 样式 
对 应 右 侧 结构 部 分 ， 依 然 分 两 个 方面 来 定义 右 侧 部 分 的 样式 。 


1. 制作 关于 我 们 部 分 的 样式 

【代码 18-22】 关 于 我 们 部 分 的 样式 和 前 面 章节 讲解 的 圆 角 框 的 制作 方法 类 似 。 分 别 用 背景 图 片 
制作 头 部 和 底部 的 圆 角 部 分 ， 然 后 用 背景 颜色 的 方法 制作 中 间 内 容 部 分 ， 街 接头 部 和 底部 的 圆 角 。 具 
体 样式 如 程序 18.22 所 示 。 


程序 18.22 制作 关于 我 们 部 分 的 样式 


01 .right{ 

02 float:right;} 

03 .righta{ 

04 Color:#58595B;} 重新 定义 链接 的 样式 */ 
05 .aboutustop { 

06 ‘width:171px; 

07 height:6px; 

08 background: url(../images/index_29.gif) no-repeat; /用 背景 图 片 制作 头 部 圆 角 %/ 
09 font-size:0;} 

10 .aboutustitle{ 

11 width:171px; 

He height:20px; 

13 background-color:#CDE3EC;} 

14 .aboutuscontent{ 

LL background:#cde3ec; 

16 height:186px; /定义 容器 的 高 度 */ 

17 width:151px; 

18 padding:0 10px; "容器 内 容 的 左右 空白 */ 
19 line-height:18px;} 

20 .aboutusmore{ 

pa background:#cde3ec; 

22 width:171px;} 

23 .more{ 

24 float:right; 

25 margin:0 10px 10px 0:} 让 控制 文本 的 精确 位 置 */ 
26 .aboutusbottom{ 

27 width:171px; 

28 height:4px:; 

29 font-size:0px; 

30 background:url(../images/index_53.gif) no-repeat:} 让 制作 底部 圆 角 */ 


【深入 学 习 】 这 里 使 用 的 页 面 结构 并 不 是 最 好 的 页 面 结构 ,这 一 点 从 制作 样式 表 时 就 可 以 看 出 来 。 
此 时 ， 样 式 表 中 定义 了 大 量 重复 的 宽度 属性 ， 如 果 给 关于 我 们 部 分 和 欢迎 部 分 制作 一 个 父 元 素 ， 则 可 
以 一 次 性 地 定义 所 有 的 宽度 。 所 以 ， 在 制作 过 程 中 一 定 要 随时 分 析 页 面 结构 的 合理 性 。 
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【代码 18-23】 定 义 父 元 素 后 的 页 面 结构 如 程序 18.23 所 示 。 


程序 18.23 ”定义 父 元 素 后 的 页 面 结构 
01 <divclass="right"> 


02 
03 right> 
04 ! = 中 间 省 略 了 原来 定义 的 关于 我 们 和 欢迎 图 片 部 分 的 结构 
05 === 一 = 一 > 
06 </div> 
07 一 省 页 右 例 的 区 元 过 结束 三 二 一 一 一 一 
08 </div> 

【深入 学 习 】 在 home-right 选择 符 中 定义 如 下 样式 : 
.home _right{ 

width:171px;} 


这 样 ， 就 可 以 去 掉 其 子 元 素 中 所 有 宽度 的 定义 了 。 其 好 处 在 于 更 改 右 侧 内 容 宽 度 更 加 简单 ， 不 好 
的 地 方 在 于 增加 了 页 面 元 素 。 

2. 制作 欢迎 图 片 部 分 的 样式 

【代码 18-24】 这 部 分 的 样式 比较 简单 ， 具 体 代码 如 程序 18.24 所 示 。 


程序 18.24 制作 欢迎 图 片 部 分 的 样式 


01 .welcomepic{ 

02 margin-top:16px;} /控制 图 片 的 位 置 ?/ 

03 .welcomecontent{ 

04 background-color#EOEDF3; 

05 height:126px; /控制 背景 的 高 度 使 其 与 左 侧 和 中 间 基 本 相同 */ 
06 text-align:center; 


07 padding: 10px;} 
【运行 效果 】 定 义 了 右 侧 样式 后 ， 页 面 显示 效果 如 图 18.11 所 示 。 


图 18.11 定义 了 右 侧 样 式 后 的 效果 
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18.5 制作 首页 的 底部 


首页 的 底部 相对 来 说 简单 一 些 ， 主 要 由 3 个 部 分 组 成 ， 分 别 是 左 侧 的 圆 角 、 中 间 的 内 容 、 右 侧 的 
圆 角 ， 其 效果 图 如 图 18.12 所 示 。 


Welcome to yeeoeecom 2006 International 


图 18.12 底部 的 效果 图 
【代码 18-25】 底 部 的 页 面 结 构 如 程序 18.25 所 示 。 


程序 18.25 ”底部 的 页 面 结构 
01 <div class="footer"> 


02 <div class="footerleft"></div> 

03 <div class="footercontent"> 

04 <div class="footercontentleft">Welcome to ******.com</div> 

05 <div class="footercontentright">2006 International</div></div> 
06 <div class="footerright"></div></div> 


【深入 学 习 】 结 构 很 简单 ， 左 右 两 侧 是 用 来 制作 圆 角 的 ， 中 间 的 内 容 又 分 成 左右 两 个 部 分 。 
【代码 18-26】 上 述 代码 的 样式 如 程序 18.26 所 示 。 


程序 18.26 底部 的 页 面 结构 的 样式 


01 .footer{ 

02 margin:0 auto; /定义 父 元 素 的 居中 %/ 
03 Width:790px; 

04 height:36px; 

05 padding-bottom:5px;} 

06 .footerleft{ 

07 float:left; 

08 background:url(../images/index_83.gif) no-repeat le 化 让 制作 左 侧 圆 角 */ 
09 width:5px; 

10 height:26px;} 

11 .footercontent{ 

站 六 float:left: 

13 width:780px:; 

14 height:26px; 


15 background-color:-#006699;} 让 内容 部 分 的 背景 */ 
16 footercontentleft{ 
147 float:left: 


18 margin:3px 0 0 10px; 
19 Color:#fFffff: 
20 font-weight:bold;} 
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21 .footercontentright{ 

22 float:right; 

23 margin:3px 0 0 10px; 
24 color- 贡 fffff 

25 font-weight:bold;} 


26 
27 footerright{ 
28 float:left; 


29 background:url(../images/index_86.gif) no-repeat right; 站 制作 右 侧 圆 角 */ 
30 width:5px; 
31 height:26px;} 
【深入 学 习 】 第 2 行 是 定义 父 元 素 的 居中 ， 这 种 方法 在 界面 设计 中 常常 碰 到 。 第 8 行 和 第 29 行 制 
作 的 是 圆 角 界面 。 
【运行 效果 】 此 时 页 面 底 部 的 显示 效果 如 图 18.13 所 示 。 


Welcome to com 2006 International 


图 18.13 定义 样式 后 的 底部 效果 
18.6 首页 的 兼容 问题 


以 上 的 制作 过 程 都 是 在 下 6.0 下 进行 的 ,制作 好 的 首页 在 Firefox2.0 中 的 显示 效果 如 图 18.14 所 示 。 


18.14 首页 在 Firefox2.0 中 的 显示 效果 


从 图 18.14 中 可 以 看 到 ,此 时 存在 的 显示 问题 出 现在 中 间 服 务 展 示 的 部 分 。 从 页 面 效 果 来 看 , 很 可 
能 是 内 容 宽度 的 问题 ， 也 可 能 是 由 于 并 列 的 浮动 元 素 在 Firefox 浏览 器 中 的 特殊 性 造成 的 。 
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【代码 18-27】 首 先 看 一 下 图 片 和 内 容 部 分 的 结构 (以 左 侧 部 分 为 例 ) ， 如 程序 18.27 所 示 。 


程序 18.27 图 片 和 内 容 部 分 的 结构 
01 <divclass="middleleft"> 


02 <img src="images/pic1.jpg" width="81" height="81" alt="pic" /> 

03 <div class="piccontent"> 

04 <div class="pictitle"><a href="#">Scenic Display </a> </div> 

05 <a href="#">Here is a scenic display of the pictures.</a> </div> 
06 </div> 


【深入 学 习 】 上 述 代码 从 结构 上 看 ， 内 容 和 图 片 是 属于 同 级 的 关系 。 
【代码 18-28】 图 片 和 内 容 部 分 的 结构 的 样式 如 程序 18.28 所 示 。 


程序 18.28 图片 和 内 容 部 分 的 结构 的 样式 


01 .middle img{ 

02 float:left:} 

03 .piccontent{ 

04 float:left; 

05 line-height:15px; 

06 margin:3px 0 4px 10px; 

07 height:80px; 

08 background:#999999;} 

【深入 学 习 】 从 定义 的 样式 中 可 以 看 到 ， 此 时 内 容 部 分 没有 定义 宽度 ， 但 是 两 个 元 素 都 定义 了 浮 

动 属性 。 所 以 可 以 分 析出 ， 此 时 的 问题 是 由 于 并 列 浮动 元 素 在 Firefox 中 没有 定义 宽度 造成 的 。 所 以 在 
piccontent 中 增加 宽度 代码 如 下 所 示 : 


width:90px; 
18.7 二 级 页 面 的 制作 


从 效果 图 中 可 以 看 出 ， 首 页 和 二 级 页 面 的 头 部 、 左 侧 、 底 部 都 是 相同 的 ， 所 以 只 需要 更 改 首页 中 
间 内 容 部 分 和 右 侧 部 分 即 可 。 


18.7.1 分 析 二 级 页 面 的 效果 图 


二 级 页 面 的 中 间 内 容 部 分 的 效果 图 如 图 18.15 所 示 。 
从 图 18.15 可 以 看 出 , 此 时 中 间 内 容 部 分 是 由 上 面 的 展示 图 片 和 下 面 的 新 闻 列 表 组 成 的 。 新 闻 列 表 
部 分 又 分 为 日 期 和 内 容 两 个 部 分 ， 右 侧 部 分 是 由 一 个 列表 和 一 个 图 片 组 成 。 下 面 详细 讲解 具体 的 制作 
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图 18.15 二 级 页 面 内 容 部 分 的 效果 图 


18.7.2 制作 二 级 页 面 中 间 内 容 部 分 的 结构 


在 


制作 二 级 页 面 之 前 ， 首 先 要 在 页 面 头 部 文件 中 增加 链接 新 样式 表 的 代码 ， 如 下 所 示 : 


<link href="style/newsroom.css" type="text/css" rel="stylesheet" /> 


| 
不 同 ， 
再 下 面 


代码 18-29】 中 间 图 片 展示 的 部 分 可 以 使 用 首页 的 结构 ， 不 同 之 处 在 于 ， 此 时 图 片 使 用 的 样式 
因为 此 时 图 片 的 宽度 和 首页 图 片 的 宽度 不 同 。 接 下 来 的 部 分 是 一 个 标题 ， 然 后 是 分 隔 的 颜色 块 ， 
是 日 期 和 标题 的 列表 。 具 体 的 代码 如 程序 18.29 所 示 。 


程序 18.29 中 间 内 容 部 分 的 结构 


<div class="middle"> 

<img src="images/newsroom.jpg" alt="event" /> 
<div class="clear"></div> 

== 标 题 部 分 =: 

<div Ey middletitle"><span class="titleblue">Newsroom</span></div> 


3 


<div class="two_middlecontentbig"> 
<div class="|left_list"> 
<Ul> 
<li>Sep 01 2006</li> 
<li>Aug 29 2006</li> 
<li>Aug 29 2006</li> 
<li>Aug 29 2006</li> 
<li>Aug 29 2006</li> 
<li>Aug 29 2006</li> 
<li>Aug 29 2006</li> 
<li>Aug 29 2006</li> 
</ul></div> 
<div class="right_list"> 


“is 


22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
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<ul> 
<li><a href="#"> 


Here is some news content can be shown in the latest relevant news.</a></li> 
<li>Here is some news content can be shown in the latest relevant news</li> 
<li>Here is some news content can be shown in the latest relevant news</li> 
<li>Here is some news content can be shown in the latest relevant news</li> 
<li>Here is some news content can be shown in the latest relevant news.</li> 
<li>Here is some news content can be shown in the latest relevant news</li> 
<li>Here is some news content can be shown in the latest relevant news</li> 
<li>Here is some news content can be shown in the latest relevant news</li></ul></div> 


<div class="clear"></div> 
</div> 
</div> 


【深入 学 习 】 第 10 一 20 行 是 左 侧 列表 ， 按 时 间 排 列 ， 第 21 一 31 行 是 右 侧 列表 ， 显 示 新 闻 内 容 。 


全 注意 : 因为 新 闻 内 容 部 分 是 用 程序 显示 的 ， 所 以 ， 不 用 将 所 有 的 含有 链接 的 列表 都 制作 成 
空 的 链接 〈 空 链接 的 意思 是 路 径 为 “#” 的 链接 ) 。 


18.7.3 制作 二 级 页 面 中 间 内 容 部 分 的 样式 


这 个 部 分 的 样式 可 以 分 为 两 个 部 分 ， 


-部 分 是 其 他 二 级 页 面 也 会 使 用 的 公用 样式 ， 另 


-部 分 是 新 


闻 页 面 独立 使 用 的 样式 。 其 中 ， 公 用 样式 要 定义 在 mian.css 中 ， 独 立 的 样式 定义 在 newsroom.css 中 。 
下 面 分 别 进行 制作 。 
1. 制作 页 面 中 间 内 容 公用 的 样式 
【代码 18-30】 二 级 页 面 的 公用 样式 包括 图 片 大 小 、 标 题 、 分 隔 色 块 等 , 其 样式 如 程序 18.30 所 示 。 


程序 18.30 页面 中 间 内 容 公用 的 样式 


.titleblue{ 
margin-left:10px; 
font-size:18px; 
color:#006599; 
font-family:Arial, Helvetica, sans-serif} 
.two_showpic{ 
‘width:416px; 
height:87px;} 
.two_middletitle{ 
margin-top:16px;} 
.spaceline{ 
height:22px; 
width:400px; 
margin:6px 0 10px 10px; 
background-color:#EO0EDF3;} 
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让 所 有 二 级 页 面 内 容 部 分 使 用 的 标题 */ 


让 二 级 页 面 展 示 图 片 的 大 小 */ 


让 二 级 页 面 标题 与 图 片 的 距离 */ 


让 二 级 页 面 中 的 分 隔 色 块 */ 
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【深入 学 习 】 因 为 所 有 的 二 级 页 面 都 将 使 用 以 上 样式 ， 所 以 可 定义 在 main.css 中 ， 便 于 其 他 二 级 
页 面 的 调用 。 
2. 制作 页 面 中 间 内 容 独立 的 样式 


【代码 18-31】 新 闻 页 面 中 间 部 分 的 独立 样式 ， 主 要 是 对 两 个 列表 的 控制 。 其 中 包括 列表 的 宽度 、 
文本 、 链 接 等 属性 ， 其 具体 样式 如 程序 18.31 所 示 。 


程序 18.31 页 面 中 间 内 容 独立 的 样式 


01 .left list{ 使 用 浮动 属性 对 左 侧 列表 定位 ， 同 时 定义 宽度 */ 
02 float:left: 

03 width:120px; 

04 margin-left:-6px;} 

05 .left listli{ 让 定义 列表 的 高 度 等 属性 */ 


06 Color:#006599; 
07 height:52px; 
08 line-height:20px;} 


09 .right list{ /* 使 用 浮动 属性 控制 右 侧 列表 与 左 侧 列表 同行 显示 */ 
10 Width:280px; 

11 float:left,} 

12 .right list Iif{ 

13 height:52px; 

14 line-height:20px;} 

15 .right listlia{ 让 定义 链接 的 颜色 */ 


16 Color:#58595b;} 

【深入 学 习 】 列 表 部 分 的 样式 ， 主 要 是 通过 使 用 补 白 、 边 界 和 行 高 等 属性 ， 将 各 个 列表 元 素 区 
分 开 。 

【运行 效果 】 页 面 在 定义 完 中 间 部 分 样式 后 ， 显 示 效 果 如 图 18.16 所 示 。 
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Newsroom 


18.16 ”定义 完 页 面 新 闻 内 容 部 分 样式 后 的 显示 效果 
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18.7.4 制作 二 级 页 面 右 侧 部 分 的 结构 


【代码 18-32】 二 级 页 面 右 侧 部 分 的 结构 比较 简单 ， 包 括 一 个 标题 、 一 个 列表 和 一 个 图 片 。 具 体 
的 代码 如 程序 18.32 所 示 。 


程序 18.32 二 级 页 面 右 侧 部 分 的 结构 
01 <divclass="right"> 


02 <div class="two_rightcontent"> 

03 <div class="press_title"><a href="#">Success stories</a></div> ”<!--=== 标 题 部 分 ===--> 
04 <ul> <!--=== 列 表 部 分 ===--> 
05 <li><a href="#">2006</a></li> 

06 <li><a href="#">2005</a></li> 

07 <li><a href="#">2004</a></li> 

08 <li><a href="#">2003</a></li> 

09 <li><a href="#">2002</a></li> 

10 <li><a href="#">2001</a></li> 

11 <li><a href="#">2000</a></li> 

12 <li><a href="#">1999</a></li> 

13 <li><a href="#">1998</a></li></ul> 

14 <!--=== 图 片 部 分 ===--> 
15 <a href="#"><img src="images/contact.jpg" width="104" height="129" alt="pic" /></a> 

16 </div> 

17 </div> 


【深入 学 习 】 第 5 一 13 行 是 一 个 列表 , 第 15 行 是 个 图 片 ， 这 个 图 片 的 文件 地 址 通过 src 属性 决定 。 


说 明 ， 在 定义 结构 时 ， 要 合理 利用 元 素 的 包含 关系 ， 尽 量 减 少 页 面 元 素 的 数量 。 


18.7.5 制作 二 级 页 面 右 侧 部 分 的 样式 


【代码 18-33】 因 为 整个 二 级 页 面 的 右 侧 内 容 都 将 使 用 现在 的 内 容 ， 所 以 要 把 右 侧 的 样式 都 定义 
在 main.css 文件 中 。 具 体 样式 如 程序 18.33 所 示 。 


程序 18.33 二 级 页 面 右 侧 部 分 的 样式 


01 .two_rightcontent{ "定义 右 侧 内 容 的 高 度 和 背景 */ 
02 background-color:#cde3ec; 

03 width:136px; 

04 height:590px:; 

05 padding:10px 10px 0;} 让 定义 内 容 与 边界 的 间隔 */ 

06 .two_rightcontent img{ 

07 margin:40px 0 0 16px:} 定义 图 片 的 位 置 */ 


08 .two_rightcontent li{ 
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09 line-height:20px;} 让 定义 列表 的 间隔 */ 
10 .two_rightcontent af 

11 color:#006699; 让 定义 新 的 链接 样式 */ 
12 text-decoration:underline; 

13 font-size:11px;} 


【深入 学 习 】 上 述 代 码 通 过 注释 可 以 看 出 ， 第 8、9 行 定义 的 是 列表 的 间隔 ， 这 样 是 为 了 让 列表 看 
起 来 更 舒服 、 更 美观 。 
【运行 效果 】 页 面 在 定义 右 侧 内 容 后 ， 显 示 效 果 如 图 18.17 所 示 。 


| 


图 18.17 定义 完 右 侧 样式 后 的 显示 效果 
在 Firefox 中 进行 测试 ， 页 面 显示 效果 相同 。 这 样 ， 二 级 页 面 就 制作 完成 了 。 


18.8 人 小 结 


本 章 虽 然 是 一 个 英文 网 站 ， 但 整个 分 析 思 路 和 中 文 网 站 并 没有 什么 区 别 。 本 章 首先 介绍 如 何 进行 
主页 面 的 切 图 ， 然 后 介绍 如 何 制 作 首页 的 头 部 ， 其 次 是 首页 的 主体 部 分 ， 最 后 才 是 首页 的 底部 。 制 作 
完 主 页 后 ， 本 书 才 开始 介绍 二 级 页 面 的 制作 。 和 希望 读者 通过 本 章 的 分 析 思 路 能 够 掌握 网 站 的 制作 流程 
和 技巧 。 
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期 作 中 文 网 站 


在 制作 网 页 时 ， 使 用 可 视 化 的 开发 工具 ， 不 但 简单 易 用 ， 而 且 可 以 大 大 提高 站 点 开发 的 效率 。 本 
章 的 主要 内 容 是 讲解 如 何 使 用 可 视 化 开发 工具 Dreamweaver 进行 标准 网 站 的 开发 ， 其 中 包括 一 个 完整 
的 站 点 首页 和 一 个 二 级 页 面 的 制作 。 通 过 本 章 的 学 习 ， 重 点 要 掌握 使 用 Dreamweaver 添加 页 面 元 素 和 
样式 的 方法 与 用 可 视 化 开发 工具 制作 页 面 时 需要 注意 的 问题 等 知识 。 

本 章 的 主要 知识 点 如 下 。 

口 效果 图 的 分 析 。 

口 站 点 首页 的 制作 。 

口 二 级 页 面 的 制作 。 

口 兼容 问题 及 解决 。 

【本 节 示 例 参 考 : 资料 光盘 \ 第 19 章 】 


19.1 分 析 效 果 图 


同样 ， 在 本 实例 中 也 只 讲解 站 点 首页 和 一 个 二 级 页 面 的 制作 方法 ， 其 他 页 面 的 制作 可 以 参照 类 似 
的 方法 。 其 中 ， 站 点 首页 的 效果 图 如 图 19.1 所 示 。 


图 19.1 站 点 首页 的 效果 图 


第 19 章 综合 实例 : 使 用 Dreamweaver 制 帮 中 交 抽 于 烛 


一 个 二 级 页 面 的 效果 图 如 图 19.2 所 示 。 


样式 也 是 相同 的 ， 区 别 在 于 
1. 首页 效果 图 的 分 析 


图 19.2 ”站 点 二 级 页 面 的 效果 图 
从 图 19.1 和 图 19.2 可 以 看 出 ， 首 页 和 二 级 页 面 的 头 部 、 堪 侧 和 底部 是 相同 的 ， 右 侧 部 分 的 宽度 和 


内 容 不 同 。 


从 图 19.1 可 以 看 出 ， 首 页 在 纵向 可 以 分 为 3 个 部 分 : 头 部 (包括 logo 部 分 和 导航 》、 内 容 部 分 、 
底部 。 其 中 ， 中 间 内 容 部 分 又 可 以 分 为 两 个 部 分 : 左 侧 的 公告 热点 信息 等 ， 右 侧 的 关于 我 们 、 新 闻 列 


表 和 相关 链接 的 部 分 。 
2. 二 级 页 面 的 分 析 


二 级 页 面 和 首页 的 结构 基本 相同 ， 区 别 在 于 右 侧 的 内 容 此 时 为 新 闻 列 表 。 


19.2 制作 首页 的 切 图 


分 析 完 页 面 结构 后 ， 就 要 进行 切 图 了 。 同 样 要 注意 文本 的 隐藏 、 切 片 的 选择 、 保 存 格 式 等 儿 个 方 


面 。 下 面 进行 详细 的 讲解 。 
在 制作 切 图 时 ， 首 先 要 


区 分 出 页 面 内 容 和 修饰 的 部 分 ， 然 后 分 析出 哪些 修饰 部 分 是 可 以 用 CSS 代 


码 来 实现 的 ， 哪 些 部 分 是 可 以 用 背景 图 片 来 实现 的 ， 哪 些 是 需要 知道 详细 宽度 的 。 在 制作 切 图 时 ， 首 


先 要 把 影响 背景 的 文本 内 容 


去 掉 , 同时 要 尽量 减少 图 片 文件 的 数量 。 制作 好 的 首页 切片 如 图 19.3 所 示 。 
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图 19.3 首页 的 切片 


图 19.3 的 切片 中 ， 用 作 背 景 的 图 片 包括 头 部 背景 、 导 航 背景 、 主 体 背 景 、 底 部 背景 、 分 类 图 标 ， 
其 他 的 图 片 为 内 容 图 片 。 切 好 图 后 将 切片 保存 到 磁盘 相应 的 位 置 ， 因 为 实例 中 二 级 页 面 内 容 部 分 没有 
新 的 图 片 ， 所 以 可 以 不 进行 切 图 操作 。 新 建 一 个 站 点 ， 然 后 将 使 用 到 的 图 片 放 入 images 文件 夹 中 。 


19.3 制作 站 点 首页 头 部 


做 好 准备 工作 后 ， 就 可 以 开始 制作 页 面 了 。 同 前 面 章 节 的 实例 制作 一 样 ， 首 页 头 部 也 要 分 成 儿 个 
部 分 进行 制作 。 下 面 分 别 进行 讲解 。 


19.3.1 首页 头 部 的 信息 和 基础 样式 的 制作 


首先 建立 index.html 页 面 。 关 于 建立 文件 的 方法 ， 前 面 章 节 已 经 讲解 过 了 ， 这 里 不 再 重 述 。 然 后 
制作 链接 的 样式 文件 。 

1. 制作 链接 的 外 部 样式 文件 

(1) 选择 “文件 ”|“ 新 建 ” 命 令 ， 新 建 一 个 css 文件 。 

(2) 选择 “文件 ”|“ 另 存 为 ”命令 ,将 新 建 的 css 文件 保存 在 style 文件 夹 中 ， 并 命名 为 main.css。 

(3) 选择 “窗口 ”|“CSS 样式 ”命令 ， 打 开 CSS 控制 面板 ， 如 图 19.4 所 示 。 单 击 CSS 控制 面板 
顶端 右 侧 的 按钮 ， 打 开 下 拉 子 菜单 ， 如 图 19.5 所 示 。 

(4) 选择 “附加 样式 表 ” 命 令 ， 打 开 “ 链 接 外 部 样式 表 ” 对 话 框 ， 选 择 制作 的 main.css 文件 ， 如 
图 19.6 所 示 。 
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图 19.4 CSS 控制 面板 图 19.5 


CSS 控制 面板 子 菜单 


19.6 
单 击 “确定 ”按钮 ， 制 作 好 链接 的 外 部 样式 。 在 代码 视图 中 ， 对 应 的 代码 如 下 所 示 
<link href="style/mian.css" rel="stylesheet" type="text/css" /> 
2. 设置 页 面 属性 


“链接 外 部 样式 表 ” 对 话 框 


(1) 选择 “修改 ”|“ 页 面 属性 ”命令 ,打开 “页 面 属性 ”对 话 框 ， 如 图 19.7 所 示 。 页 面 属性 有 5 
个 分 类 ， 其 中 常用 的 是 定义 页 面 的 外 观 
数 如 图 19.8 所 示 。 


. 有 
链接 、 标 题 、 标 题 / 编 码 。 在 本 实例 中 ， 所 选用 的 外 观 属性 参 
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图 19.7 “页 面 属性 ”对 话 杠 19.8 关于 外 观 的 设置 
(2) 在 本 实例 中 ,所 选用 的 链接 属性 参数 如 图 19.9 所 示 。 标题 是 指 页 面 中 hl 到 h6 的 标题 元 素 的 
样式 ， 如 果 页 面 中 不 需要 ， 可 以 不 设置 相关 属性 

(3) 标题 /编码 是 指 页 面 的 标题 ， 默 认 的 设置 是 “无 标题 文档 ”， 所 以 要 重新 定义 页 面 标题 。 关 
于 编码 ， 中 文 常用 的 是 gb2312 编码 ， 也 是 页 面 默 认 的 编码 。 具 体 的 参数 设置 如 图 19.10 所 示 。 
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图 19.9 链接 的 参数 设置 


19.10 标题 /编码 的 参数 设置 
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(4) 单 击 “确定 ”按钮 ， 这 样 页 面 的 属性 就 定义 完了 。 


【代码 19-1】 不 过 此 时 定义 页 面 属性 所 产生 的 CSS 代码 ， 会 显示 在 页 面 head 元 素 中 ， 其 在 代码 
视图 中 显示 的 代码 如 程序 19.1 所 示 。 


程序 19.1 定义 页 面 属性 所 产生 的 CSS 代 码 
01 <styletype="text/css"> 


02 <!-- 

03 body,td,th{ 

04 font-family: 宋体 ; 

05 font-size: 12px; 

06 color: #dddddd; 
Dr 

08 body{ 

09 background-color: #044cba; 
10 margin-left: Opx; 

11 margin-top: Opx; 

12 margin-right: Opx; 

13 margin-bottom: Opx; 
kW 

15 a 

16 font-size: 12px; 
hr 

18 a:link { 

19 text-decoration: none; 
20 } 

21 a:visited { 

2 text-decoration: none; 
2 

24 a:hover{ 

25 text-decoration: none; 
26 color: #FFFF66; 
ZI 

28 a:active { 

29 text-decoration: none; 
30 color: #FFFF66; 
3T3 

32 --> 

33 </style> 


【深入 学 习 】 显 然 ， 这 种 在 页 面 中 调用 CSS 的 方式 并 不 方便 。 因 为 使 用 这 种 方式 ， 在 新 制作 的 每 
一 个 页 面 中 都 要 重新 定义 页 面 属 性 。 所 以 要 将 style 元 素 中 的 CSS 代码 粘贴 到 main.css 文件 中 ， 以 方便 
其 他 页 面 的 调用 。 同 时 取消 style 元 素 的 定义 。 


【代码 19-2】 经 过 更 改 后 ， 页 面 头 部 的 代码 如 程序 19.2 所 示 。 
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程序 19.2 页面 头 部 的 代码 


01 <!DOCTYPE html PUBLIC "-WW3CWDTD XHTML 1.0 TransitionaWEN” 
02 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

03 <html xmlns="http://www.w3.orq/1999/xhtml > 

04 <head> 

05 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
06 ”<title>css 实例 2</title> 

07 <link href="style/mian.css" rel="stylesheet" type="text/css" /> 

08 </head> 


19.3.2 ”首页 头 部 的 分 析 


首先 还 是 对 首页 头 部 效果 图 进行 分 析 ， 主 要 目的 是 区 分 页 面 中 内 容 和 修饰 的 部 分 。 头 部 的 效果 图 
如 图 19.11 所 示 。 


图 19.11 页 面 头 部 的 效果 图 
从 图 19.11 可 以 看 出 , 头 部 主要 分 为 两 个 部 分 ,其 中 导航 列表 以 上 部 分 可 以 用 背景 图 片 的 方式 实现 ， 
但 是 由 于 图 片 比较 大 ， 所 以 分 两 个 部 分 来 显示 目的 是 提高 图 片 的 加 载 速度 ) 。 下 面 是 一 个 导航 菜单 ， 
因为 使 用 了 一 个 大 的 背景 ， 所 以 只 要 控制 好 导航 列表 的 显示 位 置 就 可 以 了 。 


19.3.3 ”首页 头 部 logo 和 banner 部 分 的 制作 


首页 头 部 结构 比较 简单 ， 主 要 由 两 个 用 来 显示 背景 的 元 素 和 一 个 用 来 显示 列表 的 元 素 组 成 的 。 其 
中 ， 导 航 列表 以 上 的 内 容 分 成 两 个 部 分 ， 分 别 是 logo 部 分 和 banner 部 分 。 下 面 分 别 讲解 详细 的 制作 

(1) 在 Dreamweaver 界面 的 设计 视图 中 选择 “插入 ”|“ 布 局 对 象 ”|“Div 标签 ”命令 , 打开 “ 插 
入 Div 标签 ”对 话 框 ， 并 添加 相应 的 参数 ， 如 图 19.12 所 示 。 


说 明 : 在 插入 选项 中 有 3 种 选择 。“ 在 插入 点 ”选项 的 意思 是 ， 在 光标 所 在 的 位 置 插入 新 


(2) 单 击 “新 建 CSS 样式 ” 按钮， 打开 “新 建 CSS 规则 ”对 话 框 ， 并 设置 相应 的 参数 ， 如 图 19.13 
所 示 。 
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19.12 添加 header 元 素 19.13 新建 header 元 素 的 CSS 规则 


(3) 单 击 “ 确 定 ” 按 钮 ， 打 开 “CSS 规则 定义 ”对 话 框 ， 如 图 19.14 所 示 。 在 “CSS 规则 定义 ” 
对 话 框 的 “分 类 ” 栏 中 ， 将 CSS 属性 分 为 8 类 ， 现 分 别 介绍 如 下 。 


口 


口 


类 型 : 主要 用 来 定义 文本 的 属性 。 包 括 字体 、 字 体 的 大 小 、 字 体 的 样式 、 加 粗 、 行 高 、 修 饰 、 
颜色 等 属性 。 
背景 : 主要 用 来 定义 元 素 的 背景 属性 。 包 括 背 景 颜色 、 背 景 图 片 、 背 景 附件 、 背 景 的 重复 和 
位 置 等 属性 。 
区 块 : 主要 用 来 定义 文本 的 缩 进 和 对 齐 属性 。 包 括 水 平 对 齐 、 垂 直 对 齐 、 文 本 的 缩 进 、 空 白 
的 设置 等 属性 。 
方 框 : 主要 用 来 定义 元 素 的 除 边 框 外 的 盒 模型 区 域 和 浮动 属性 。 包 括 宽度 、 高 度 、 补 白 、 边 
界 、 浮 动 、 清 除 等 属性 。 

边框 : 主要 用 来 定义 边框 的 属性 。 包 括 边框 宽度 、 边 框 样式 、 边 框 颜 色 等 属性 。 

列表 : 主要 用 来 定义 列表 的 相关 属性 。 包 括 列 表 类 型 、 项 目 符号 替换 图 片 、 位 置 等 属性 。 
定位 : 主要 用 来 定义 定位 属性 。 包 括 绝对 定位 、 相 对 定位 、 固 定 定位 ， 以 及 各 个 方向 上 的 边 
偏 移 属性 等 。 

扩展 : 主要 用 来 定义 一 些 光标 显示 、 分 页 、 滤 镜 等 属性 。 


说 明 : 在 “CSS 规则 定义 ”对 话 框 中 ， 除 扩展 外 使 用 的 大 多 数 属性 ， 本 书 都 已 经 做 过 详细 


(4) ID 选择 符 header 中 ， 设 置 的 CSS 属性 如 图 19.14、 图 19.15 所 示 。 


header 的 555 夫 则 定 到 国 
分 类 
5 六 RE | 
Aeror 本 5 | 
世 | Ew 。。。。 习 出 Pg a 
ET ee rp | | 
MM OD: Flt OD We :0 tw. | tw: [5 
Ci | | 
三 mM 万 : 厂 卫 | 在: | 
厂 无 外 
Ce | mw | ww | [本 i | mw| | 
图 19.14 “CSS 规则 定义 ”对 话 杠 图 19.15 ”header 元 素 的 方 框 属性 


(5) 此 时 ，header 元 素 只 定义 了 方 框 属性 ， 其 中 所 添加 的 参数 分 别 是 宽度 为 998px。 边 界 属性 中 ， 
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上 下 边界 为 0， 左 右边 界 为 auto， 目 的 是 使 元 素 水 平 居中 显示 。 单 击 “ 确 定 ” 按 钮 ， 完 成 header 元 素 的 
样式 。 在 页 面 中 删除 软件 默认 添加 的 提示 内 容 ， 然 后 仿照 添加 header 元 素 的 方法 添加 其 他 的 元 素 。 
1. 制作 logo 元 素 的 样式 
(1) 选择 “插入 ”| “布局 对 象 ” |“Div 标签 ”命令 ,打开 “插入 Div 标签 ”对 话 框 ， 并 添加 相应 
的 参数 , 如 图 19.16 所 示 。 然 后 单 击 “ 新 建 CSS 样式 ”按钮 定义 logo 的 样式 , 其 具体 的 参数 如 图 19.17、 
图 19.18 所 示 。 


FREEOE 


从 及 ED 


/indez2_01. jpi 本 | 浏览 


站 到 Pw 可 [ER 可 
[ | we | | 


新入 [在 白 入 点 
类 :fee 


EF 


了 应 用 弄 肌 


图 19.16 添加 logo 元 素 图 19.17 logo 元 素 的 背景 属性 


分 类 力 框 


ED: 站 可 JR Ww: 本 
而 :本 /mG 可 两 中 关 
WE asine || 

上 @:[ 六 可 5 可 
十 @: 门 可 [BE 可 十 o@ 门 可 
TW:[ 可 5 | FV: 3 
#wW: 厂 可 [Raw | #w: 厂 习 


0 


上 WW: 王 避 


Ce ww | mnw | ww | 


图 19.18 ”logo 元素 的 方 框 属性 
(2) 定义 完 以 上 样式 ， 同 时 去 掉 软件 自动 生成 的 内 容 后 ， 页 面 的 显示 效果 如 图 19.19 所 示 。 


多 中 国 某 某 证 券 投资 有 限 公司 


Chine XX Securities and Investment co., Ltd. 


图 19.19 ”定义 完 logo 元 素 样式 后 的 显示 效果 


2. 定义 banner 元 素 的 样式 
(1) 选择 “插入 ”|“ 布 局 对 象 ”|“Div 标签 ”命令 ,打开 “插入 Div 标签 ”对 话 框 ， 并 添加 相应 
的 参数 ， 如 图 19.20 所 示 。 
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x 
| 确定 
插入 : [在 医 入 上 z| a Me 
类 : aa | | mw | 
| 天助 


图 19.20 添加 banner 元 素 


注意 : 在 添加 新 元 素 之 前 ， 一 定 要 把 光标 放置 在 相应 的 位 置 ， 例 如 ， 现 在 添加 的 banner 元 
素 在 logo 元 素 的 后 面 ， 所 以 可 以 使 用 键盘 上 向 右 的 方向 键 ， 将 光标 移动 到 logo 元 素 之 外 ， 再 使 用 如 
图 19.20 所 示 的 参数 ， 添 加 banner 元 素 。 如 果 在 设计 视图 中 无 法 看 出 光标 的 具体 位 置 ， 可 以 到 代码 视 
图 中 确认 。 


(2) 单 击 “ 新 建 CSS 样式 ”按钮 定义 banner 的 样式 ， 其 具体 的 参数 如 图 19.21、 图 19.22 所 示 。 


.banner 的 555 规则 定义 (在 miancss 中 让 x 划 


0: | 国 
高 WD; E47 本 [未 co 可 CT 可 


筷 边界 
忆 万 全 部 相同 G) 厅 全 部 相同 四 


过 
二 巴巴 对 


We | 了 | BNW | Ww | Cae] w | znw | ww | 


图 19.21 ”banner 元 素 的 背景 属性 图 19.22 banner 元 素 的 方 框 属性 


(3) 定义 了 banner 元 素 的 样式 ， 同 时 去 掉 软件 自动 生成 的 内 容 后 ， 页 面 的 显示 效果 如 图 19.23 
所 示 。 


图 19.23 ”定义 完 banner 元 素 样式 后 的 显示 效果 
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19.3.4 “导航 列表 的 制作 


导航 列表 是 由 两 个 部 分 组 成 的 ， 分 别 用 来 显示 背景 的 父 元 素 和 导航 内 容 的 列表 元 素 ， 其 具体 的 制 
作 方 法 如 下 所 示 。 

1. 父 元 素 menu 的 制作 

将 光标 移动 到 banner 元 素 之 外 ， 选 择 “ 插 入 ”|“ 布 局 对 象 ”|“Div 标签 ”命令 ,打开 “插入 Div 
标签 ”对 话 框 ， 在 相应 的 参数 中 添加 类 名 称 为 menu。 单 击 “新 建 CSS 样式 ”按钮 定义 menu 的 样式 ， 
其 具体 的 参数 如 图 19.24、 图 19.25 所 示 。 


UW [Bm i 加 | 
OF 可 [sw J] 


WE 2 


tw I | to dm 
Wm 厂 习 [mT 可 || 右 @: 厂 可 Rm 可 
TW: Rm | Tw: [Aw 可 
堪 W: 三 本 [ER 本 | 二 @: 站 刁 隐 药 ”二 


SS 


职 滑 Ek bei] 


图 19.24 menu 元 素 的 背景 属性 图 19.25 menu 元 素 的 方 框 属性 


2. 列表 元 素 的 制作 

(1) 将 光标 移动 到 menu 元 素 之 内 ， 选 择 “插入 ”|HTML|“ 文 本 对 象 ” |“ 项 目 列表 ”命令 ， 添 加 
项 目 列表 。 然 后 选择 “插入 ”|HTML| “文本 对 象 ”| “列表 项 ”命令 ， 添 加 列表 内 的 项 目 ， 同 时 添加 内 容 
“企业 形象 页 ”。 调 整 光标 ， 依 次 添加 其 余 的 列表 项 和 内 容 ， 此 时 ，Dreamweaver 会 自动 切换 到 拆 分 视 
图 。 在 拆 分 视图 中 ， 选 择 由 元素 及 其 包含 的 元素 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “CSS 样式 ”| “新 
建 ” 命 令 ， 打开“ 新 建 CSS 规则 ”对 话 框 ， 此 时 对 话 框 中 将 会 有 默认 的 选择 符 ， 如 图 19.26 所 示 。 

(2) 使 用 默认 的 参数 ， 单 击 “ 确 定 ” 按 钮 打开“CSS 规则 定义 ”对 话 框 ， 其 中 定义 的 样式 如 
图 19.27、 图 19.28 所 示 。 


header .menu ul 的 C55 规则 定义 《在 miancss 中 》 EA 
EE 2 
人 WV:[ 厂 习 夺 #3): El 
襄 Q: 厂 ”器 卫 二 并: 本 
区 A 边 时 
线 [er 厅 全 部 相同 | 
上 名: 局 ” 习 隐 来 6x” 可 上 op 。” 习 [ 侣 末 &x) 本 
右 四: 民 可 [有 om 本 | 省 OO 可 [oo 可 
下 8: 启 ” 习 隐 末 6x 本 | 下 如 :局 ” 习 [ 信 素 6x) 相 
| | 
|] | Rw | | 
图 19.26 新建 CSS 规则 的 默认 参数 19.27 ”定义 列表 的 方 框 属性 
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heades BE 
4 姜 
全 
局 vm: 多 二 
加 项 目 符号 图 性) a 
六 上 人 四 了 
| 扩展 
CE mw | mw | ww | 


图 19.28 定义 列表 的 类 型 


(3) 在 拆 分 视图 中 选中 所 有 的 二 及 其 内 容 ， 使 用 和 新 建 列表 样式 一 样 的 方法 建立 列表 项 的 样式 ， 
其 具体 参数 如 图 19.29、 图 19.30 所 示 。 


| eader .menu 上 的 C55 规 则 定义 (在 miancss 中 》 EE 
字 人 | 司 
大 KB。 | | 
四 [| ww 可 站 
而) 避风 SW 可 
修 全 加 ): 厂 下 志 吉 QD MWe:C 
FF EO) 
ed 
WD 
所 元 中 
加油 应 用 由 和 助 [3 职 消 EI 村 有 
图 19.29 定义 列表 的 类 型 属性 图 19.30 定义 列表 的 方 框 属性 


(4) 以 上 定义 的 列表 属性 的 参数 是 随意 添加 的 ， 定 义 后 的 显示 效果 如 图 19.31 所 示 。 


图 19.31 定义 了 列表 属性 之 后 的 显示 效果 


(5) 从 图 19.31 可 以 看 出 ， 此 时 列表 存在 的 主要 问题 有 两 个 方面 ， 一 个 是 列表 的 位 置 不 对 ， 另 一 
个 是 列表 内 容 之 间 的 间隔 过 宽 。 所 以 要 重新 更 改 列表 和 列表 内 容 属 性 ， 更 改 的 方法 是 ， 单 击 CSS 控制 
面板 上 的 “全 部 ”按钮 ， 打 开 所 有 的 CSS 样式 ， 如 图 19.32 所 示 。 

(6) 双击 选择 符 ， 可 以 重新 打开 “CSS 规则 定义 ”对 话 框 ， 修 改 原 有 的 样式 文件 ， 最 终 列表 属性 
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中 的 方 框 属性 的 参数 如 图 19.33 所 示 。 


Fvcss 3 


cH | 
| 全 | 正在 | 


padding-botton 20px 
padding-right 16px 
Badding-top 30px 
要 加 属性 


a | 
logo 
banner 
nen I [EE 可 向 中 : 本 
header .menu 叫 JE 可 本 口 , 习 
中 - 边界 
全 部 相同 G) 伙 全 部 相同 外) 
lout left 未 cx 可 上 O 了 [ES 
font-size 14px EBD 外 工 滞 央 3|EE33S 
font-weight bold CE 可 FO [om | CE | 
可 习 


去 四 :所 本 [ 短 素 oo 


二 Ca ] 内 | maw | wh | 
EC 曙 瑟 也 
图 19.32 单 击 “ 全 部 ”按钮 后 的 面板 图 19.33 修改 后 的 列表 方 框 属性 


(7) 将 列表 内 容 样式 中 的 字体 更 改 为 13px， 然 后 更 改 列表 内 容 的 补 白 属性 ， 修 改 后 列表 内 容 的 方 
框 属性 的 参数 如 图 19.34 所 示 。 


he: nu 的 C55 规则 定义 (在 miancss 中 六 到 
Ed 


wT I 可 iD; 


EF 
Ew: lss | FT 习 
有 Qj | 本 [co 可 | | 右 回 :| 
Fm: Rs J| FU: 可 
在 :站 习 [BR59 本 | 二 四 :站 可 


Cj]_ 了 可 用 内 二 


图 19.34 ”修改 后 的 列表 内 容 方 框 属性 
(8) 修改 后 的 页 面 显示 效果 如 图 19.35 所 示 。 


图 19.35 ”修改 列表 属性 后 的 显示 效果 
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19.4 制作 首页 的 主体 部 分 


首页 的 主体 部 分 可 以 分 为 两 个 部 分 ， 分 别 是 左 侧 包含 公告 的 侧 栏 部 分 ， 右 侧 含有 新 闻 的 内 容 部 分 。 
下 面 分 别 讲解 它们 的 制作 过 程 。 


19.4.1 分 析 主 体 部 分 效果 图 


在 制作 之 前 ， 同 样 先 要 分 析 一 下 效果 图 ， 分 清 页 面 中 的 内 容 和 修饰 部 分 。 主 体 部 分 的 效果 图 如 
图 19.36 所 示 。 


图 19.36 主体 部 分 的 效果 图 


从 图 19.36 可 以 看 出 ， 左 侧 内 容 分 为 3 个 部 分 ， 分 别 为 公告 部 分 、 热 点 推荐 部 分 、 业 务 咨询 部 
分 。 右 侧 分 为 4 个 部 分 ， 分 别 是 关于 我 们 、 今 日 新 闻 、 点 拨 和 时 评 、 合 作 伙 伴 部 分 。 下 面 分 别 进行 
制作 。 


19.4.2 ”制作 主体 部 分 的 父 元 素 


主体 部 分 的 父 元 素 主 要 定义 元 素 的 居中 和 背景 。 

(1) 选择 “插入 ”|“ 布 局 元 素 ”|“Div 标签 ”命令 ， 添 加 新 的 布局 元 素 。 其 中 参数 如 图 19.37 
所 示 。 

(2) 单 击 “新 建 CSS 样式 ”按钮 ， 定 义 menu 的 样式 ， 其 具体 的 参数 如 图 19.38、 图 19.39 所 示 。 
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| 
RE 
就 虹 至 最 图 只 0: /inersiniex2_26-jp | 浏 虹 
站: 重复 四 ): 隐语 重复 了 | 
阳 御 四: 


水 平 位 置 包 ): | 下 对 卉 ”器 ] | 防 守 G] 本 
委 直 位 置 w): | 夺 珊 也 | 阵 素 5) 了 | 


图 19.37 添加 main 元素 图 19.38 ”定义 main 元 素 的 背景 属性 
的 C55 规则 定义 (在 mian.css 中 》 EE:| 
分 类 方 杠 
到 Wee 本 [及 来 co， 可 汪 动 O 相 本 
站 司机 oo 可 
取信 5 2 


OF | | 
右 虽 :三 ” 习 隔 素 Ww” 了 习 | | 右 @: 丰 吕 本 风 家 Ce) 可 
Tw: | fw:P 可 [oo 可 
左 W: 厂 习 [攻守 G5 可 || 左 如 :| 则 十 二 赔 宁 x 可 


Cw ] mw | enw | ww | 


19.39 定义 main 元 素 的 方 框 属性 


该 样式 使 用 边界 属性 定义 了 元 素 的 居中 ， 使 用 重复 属性 和 背景 图 片 定义 了 页 面 背景 。 其 原理 和 前 
面 章节 中 使 用 的 原理 完全 相同 。 


19.4.3 制作 主体 左 侧 部 分 的 样式 


主体 左 侧 部 分 分 为 3 个 部 分 来 制作 。 

1. left 元 素 和 公告 部 分 的 制作 

left 元 素 是 控制 整个 左 侧 内 容 的 位 置 、 宽 度 和 高 度 的 元 素 。 

(1) 选择 “插入 ”|“ 布 局 元 素 ”|“Div 标签 ”命令 ， 添 加 新 的 布局 元 素 。 其 中 ， 参 数 中 定义 类 名 
为 left。 添 加 left 元 素 。 

(2) 然后 单 击 “ 新 建 CSS 样式 ”按钮 定义 left 的 样式 ， 其 具体 的 参数 如 图 19.40 所 示 。 

(3) 制作 公告 部 分 ， 公 告 部 分 包括 两 个 方面 ， 即 标题 和 公告 内 容 ， 首 先 制作 公告 标题 部 分 。 

(4) 同样 先 插入 一 个 div 元 素 ， 并 添加 类 名 为 notice_tile。 然 后 单 击 “ 新 建 CSS 样式 ”按钮 定义 
公告 标题 的 样式 ， 其 具体 的 参数 如 图 19.41、 图 19.42 所 示 。 
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CSS mat 


四 | 555 规 则 定义 (在 mian.css 中 》 Ed 
Ee 3 
hao 可 周 Re SIGNENE 可 Ea SHE 
站 可 IE 可 asof[ 可 区 | x+g 碳 [SR WO 可 
厂 全 孝 相 同 G) | 吾 EL = 
| 习 [ 攻 ee 可 | 上 ®@: P| 可 行 高 四 : 本 [Ge 可 大 4 写 四 ， 可 
厂 习 友 可 lo 可 ES 的 | 
:| 习 央 9 可 | Tw: 厂 [7 相 厂 晶 际 绕 避 ) 
1 本 [Re 可 ET Ee 厂 四 生 加 
厂 无 四 
Cue ] mw | enw | ww | Ce ww | mw | ww | 
图 19.40 left 元 素 的 方 框 属性 图 19.41 公告 标题 的 字体 样式 


notice_titie 的 CSS 规则 定义 (在 miancss 中 | 
分 类 方 框 


mw: 厂 G3ww: 厂 

二 [二 [2 | 可 
Sm) [nF 和 加 

上 Go || | so: || 

FOR 

T®:[ [BE 9 Tw: ER 

rn lr | ll 


Cm | saw | ww | 


图 19.42 公告 标题 的 方 框 样式 
(5) 定义 完 公告 标题 样式 后 ， 添 加 公告 标题 文本 “站 内 公告 ”。 
(6) 最 后 制作 公告 内 容 部 分 ， 添 加 一 个 新 的 div 元 素 ， 定 义 类 名 为 notice-content。 然 后 单 击 “ 新 
建 CSS 样式 ”按钮 定义 公告 内 容 的 样式 ， 其 具体 的 参数 如 图 19.43、 图 19.44 所 示 。 


.notice_content 的 C55 规则 定义 《在 miancss 中 | | 
分 类 lL 
字 售 全); 了 | 字体 二: 也 
大 小 G): 六 可 [BR 可 粕 细 o 站 本 加 | 大 小 G@): 可 央 家 b9 本 扯 细 人: 加 
四 村 :一 避 可 FE iD 可 去 人 ww: 一 二 
行商 WW): 同 ”可 [ 伟 宁 wx) 可 大全” 可 行商 加 :所 可 央 守卫 大 让 富国: 可 
修志 外 ): 厂 下 8 BW CC rr 
上 0) 
厂 抽 队 村 
厂 内 燃 名 
厂 无 四 
Ca] ws | saw | wm | 
19.43 ”公告 内 容 的 文本 属性 19.44 公告 内 容 的 方 框 属 性 


定义 完 left 元 素 和 公告 样式 后 ， 页 面 的 显示 效果 如 图 19.45 所 示 。 
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图 19.45 定义 了 left 元 素 和 公告 样式 后 的 效果 
2. 制作 热点 推荐 部 分 
热点 推荐 部 分 ， 由 3 个 结构 样式 相同 的 部 分 组 成 ， 下 面 以 其 中 的 一 个 为 例 ， 讲 解 制作 方法 。 
(1) 在 公告 的 后 面 添加 一 个 div 元 素 ， 添 加 类 名 为 hot。 然 后 单 击 “ 新 建 CSS 样式 ”按钮 ， 定 义 
公告 标题 的 样式 ， 其 具体 的 参数 如 图 19.46 所 示 。 
(2) 添加 完 hot 元 素 后 ， 在 元 素 中 添加 图 片 元 素 ， 选 择 添 加 的 图 片 ， 右 击 添加 样式 ， 如 图 19.47、 
图 19.48 所 示 。 


有 | 国 .en hotme 的 C55 规则 定义 《在 mianicss 中 | 
分 类 3 2 
宽 明 融 W FE 习 [ 人 未 bz) 本 生动 OJEE9F 本 
高 加 而 Po | (|. 可 
后 填充 | 拓 [边界 
上 上田 | 
四 
下 ®@: 同一 
左 W: 四 可 JR 
取消 多 用 则 到 助 已 枉 ] 肥 用 邮 ) 屠 且 
图 19.46 hot 元 素 的 方 框 属性 图 19.47 图 片 的 方 框 属性 
(3) 添加 热点 的 标题 和 内 容 。 添 加 标题 “房地产 ”， 同 时 给 标题 添加 空 的 超 链接 。 在 拆 分 视图 中 


选择 a 和 其 中 的 内 容 ， 右 击 添 加 样式 ， 使 用 默认 值 ， 如 图 19.49 所 示 。 


hot img 的 C55 规则 定义 | 
边框 
样式 宽度 颜色 
太 全 部 相同 @@) | | 全 部 相同 E) 厅 全 部 相同 @) 
a a || pn 
可 | [Bee || CE 
9 | E| 
II ge | 选择 器 类 型 : 类 柯 应 用 于 任何 标签 ) ) | [和 
个 标签 重新 定义 特定 标签 的 外 观 ) 0D) | 一 
高 级 ( 了 D、 伪 类 沈 反 加 等) 内) | 
先 据 器 [nin iett ity 可 | 
| | 
Ce] ww | sw | ww | 个 习 对 该 文档 下 助 


图 19.48 图 片 的 边框 属性 图 19.49 添加 标题 的 链接 样式 


(4) 添加 的 链接 样式 如 图 19.50 所 示 。 在 拆 分 视图 的 代码 中 </a> 后 面 添加 换行 符号 <br />， 然 后 添 
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加 热点 的 内 容 。 此 时 ， 热 点 部 分 的 显示 效果 如 图 19.51 所 示 。 
全 二 四 FRR [LE 
£0 
厂 出 际 妈 已) 
[el 
Fw 
Cj]_ ww 有 由 下 助 


图 19.50 标题 的 文本 属性 


(5) 从 图 19.51 可 以 看 出 ， 
性 ， 如 图 19.52 所 示 。 


(6) ei 网 将 ba a “复制 ”、 


而 国庆。 习 [ 仙 6 [大小 过 加 [一 二 


tp0): 三 下 &8 oD) aa 
"上 2 0) 
厂 得 障 并 已] 
厂 闭 烽 名 
厂 无 中 
一 台 | mw | 如 | 


图 19.51 热点 部 分 显示 的 效果 


此 时 主要 的 问题 是 行 高 的 问题 ， 所 以 要 修改 hot 的 样式 并 添加 行 高 属 


“粘贴 ”， 制 作 另 外 
， 最 终 热点 部 分 的 显示 效果 如 图 19.53 所 示 。 


图 19.52 添加 行 高 属性 


3. 制作 咨询 热线 部 分 
咨询 热线 部 分 很 简单 ， 


图 19.53 热点 部 分 显示 的 效果 


只 需要 添加 一 个 div 元 素 ， 同 时 定义 好 行 高 ， 在 内 容 中 将 标题 和 联系 电话 用 换行 


符号 分 隔 成 两 行 即 可 。 定 义 新 添加 的 div 元 素 ， 类 名 为 contact， 并 设置 其 样式 如 图 19.54、 图 19.55 所 示 。 


2 关 
有 Ff 
部 AS | 
若 Hm 可 x#w 可 
加 于 了 ERo) 习 夫 4 加” 可 
和 四 三 ev Em 
二 同 吕 
厂 描 陈 栈 也 ) 
厂 添加 
三 无 是 
祷 定 ] 到 背 二 用 QQ bd 


I 
FW: Hse HH 
古国 :[ 可 怀 ee 本 
| | 
在 mi: 可 后 Fe 习 || 直 @: 厂 村 


本 ] 了 意 A) 项 助 


图 19.54 ”contact 元 素 的 行 高 属性 


图 19.55 ”contact 元 素 的 方 框 属性 


“348。 


第 19 章 综合 实例 四 : 使 用 Dreamweaver 制作 中 文风 5 
这 样 ， 左 侧 的 内 容 就 制作 完成 了 。 
19.4.4 ”制作 主体 右 侧 内 容 中 关于 我 们 的 部 分 


在 制作 右 侧 的 具体 内 容 之 前 ， 首 先 要 制作 控制 所 有 内 容 显示 位 置 的 父 元 素 right。 

1. 制作 父 元 素 right 

调整 光标 到 left 元 素 结束 符 的 后 面 ， 添 加 新 的 元 素 ， 定 义 类 名 为 right， 同 时 定义 样式 ， 其 参数 如 
图 19.56 所 示 。 

2. 制作 关于 我 们 的 部 分 

(1) 添加 一 个 控制 关于 我 们 的 元 素 ， 用 来 控制 所 有 关于 我 们 内 容 的 位 置 。 

(2) 添加 一 个 新 的 div 元 素 ， 定 义 其 类 名 为 aboutus， 间 设 轩 其 入 式 部 数 抽 国 19.57 所 示 。 


xl| x 
宽 旭 :i"| 到 | 个 来 5x) 到 车 动 如 [EE 了 | ED: 本 央 09 本 注 动 包 ); 
Ee | | DD a we -一 本 
本 i a WE am) [1 
LO 本 [Be 可 io 本 [Eee al 上 Gao wma | to | dR 可 
有 加: Js 可 [有 ocx 本 || 右 加 可 al 有 9; 站 可 风 表 09 可 帮 @[ 可 JR 二 ] 
To: I 可 Tw: I TW: 由 刁 [too 习 | TW [BD] 
w:[ 避 [区 Fm 可 | 四 :站 可 RE 本 在 Wi: 亲本 [不 oq 可 | 去 @[ 可 JRRO 可 
LE ww | smw | ww | | mw | 


图 19.56 right 元 素 的 方 框 属性 图 19.57 aboutus 元 素 的 方 框 样式 


(3) 在 aboutus 元 素 中 添加 新 的 div 元 素 , 定义 类 名 为 content_title, 并 设置 其 样式 参数 如 图 19.58、 
图 19.59、 图 19.60 所 示 。 


ontent_title 的 C55 规则 定义 《 在 mianx coatent_title 的 CSS 规则 定义 《在 【css 中》 3 | 
字体 四: 四 i | 
| | 一 
牛 HOD: 广 三 E77 | 站 ao 六 相 
| 要 [| 
Wn: C TR WM ©): rr 水 位置): 习 几 Re 可 
四 至 位置 四 习习 
TW 
厂 无 到 
取 汉 EN 二 和 天助 中 | | 应 用 的) 
图 19.58 ”内 容 标题 的 文本 属性 19.59 ”内 容 标题 的 背景 属性 


(4) 设置 完 内 容 标题 的 样式 后 ， 在 内 容 标题 中 添加 一 个 类 名 为 title 的 元 素 ， 同 时 在 title 中 添加 标 
题 文本 “关于 我 们 ”因为 是 中 文 网 站 ， 所 以 用 “关于 我 们 ”替代 了 效果 图 中 的 About Us) ， 此 时 内 
容 标 题 的 显示 效果 如 图 19.61 所 示 。 
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CSS mat 


岂 了 EEC | 
元 OF 可 se | | 


国 关于 我 们 
ww | enw | wm | 


图 19.60 内 容 标题 的 方 框 属性 图 19.61 内 容 标题 的 显示 效果 


(5) 之 后 再 添加 另 一 个 类 名 为 more 的 元 素 ， 同 时 在 more 元 素 中 添加 含有 链接 的 文本 more， 并 
且 定 义 title 元 素 的 样式 ， 如 图 19.62 所 示 。 设 置 more 元 素 的 属性 如 图 19.63 所 示 。 


< 划 
人 2 和 2 谎 

训 由 可 [RD 可 宰 动 四 大 5 卉 可 更 四 :站 本 [RD i 动 四 :9 丰 可 

而 :三 避风 5 二 梁 RO 习 而 0D:「 习 [9 可 oO 习 

-二 充 这 办 本 - 基 [边界 
汪 民 全 名 相 同 (5) 末 全 部 相 月 FR 万 全 部 相 网 人) 厂 全 部 相同 外 | 

£0:F Hm | 上 Fw: Lr®: dw || 上 v: Rw 

有 由: 厂 习 央 ee) 习 || 丰 @: 厂 ” 习 风 末 7 本 有 妈 : 让 ” 习 夺 车 习 || 安 @: fo 习 隐 来 Gx) 习 

TW: 三 JE | TW: [Rw 下 昌 : 厂 RR | Fo: Gy | 

在 四 :[ 门 可 了 RE 可 | ): 厂 可 卫 末 二] 在 四 :站 避风 9 了 | | 左 W): 厂 ” 习 卫 素 5x7 可 


取消 启用 (A) 六 助 Cm | mn 购 用 的 i 


图 19.62 title 元 素 的 方 框 属性 图 19.63 ”more 元素 的 方 框 属性 


(6) 同时 定义 more 中 的 链接 文本 样式 ， 如 图 19.64 所 示 。 
(7) 因为 使 用 了 浮动 属性 , 所 以 还 要 添加 一 个 清除 浮动 的 元 素 , 其 中 样式 参数 如 图 19.65、 图 19.66 


所 示 。 
Lcontent_ tie a 的 C55 规则 定义 Es 划 
分 类 uy 4 类 EE 
PO ei ivucv se 可 FD vv 
加 大 小 加 :5 ”可 | 信 来 Gx 可] 和 组 W 有 条 可 袁 大 小 人 @) [Bm 可 粗细 四: 可 
a #2 一 可 | 全 全 Hw 可 要 什 四 ) 可 
hy 行商 WD) FF 本 | 入 宁 Gx 可 大 小 号 加 可 和 站 加 本 大 小 百 
修 馆 四): 厂 下 寺 0D 颜色 is srrro 
上 0) 
厂 二 二 忆 
厂 关上 加 
乒 无 四 
Ci ws | smw| wm | 
19.64 ”more 元 素 中 链接 的 文本 样式 19.65 ”清除 浮动 元 素 的 行 高 属性 
(8) 添加 展示 图 片 和 关于 我 们 的 内 容 ， 同 时 选择 添加 的 图 片 并 右 击 ， 添 加 CSS 样式 ， 具 体 参数 
如 图 19.67、 图 19.68 所 示 。 
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到 划 
细 类 方 框 
让 ED 
MO: 百 

| 列表 

| 宇 { 边界 

上 3 厂 全 部 相同 中 
上 中 :| 习习 || 上 wo: 站 习 了 央 R99 可 
[|EEEEESI 作 工 局 |EER3S| 
下 GE [EEC IT 可 [Roy 可 
在 四 :| 可 人 赂 守 Ga 可 去 @:F 可 [ 系 ox 可 

取 少 应 用 四 天 且 | ]  m 应 用 内 天 且 


图 19.66 清除 浮动 元 素 的 方 框 属性 图 19.67 展示 图 片 的 方 框 属性 
此 时 ， 关 于 我 们 部 分 的 显示 效果 如 图 19.69 所 示 。 


FTIRTTTITTTTETTTE | 


让 特区 杰 | 本 
站 全 部 相同 名) | 全 厂 相 同 ) 万 全 部 相同 ) 
||3 司 [ 苹 oo 习 | Gceeee 
虽 ， | - 


| 
在 | 习 | | 
Cum] wm | sew | ww | 
图 19.68 ”展示 图 片 的 边框 属性 图 19.69 关于 我 们 的 显示 效果 
可 以 看 出 此 时 存在 的 问题 是 行 高 的 问题 ， 所 以 添加 aboutus 的 行 高 属性 ， 其 参数 如 图 19.70 所 示 。 
划 
分 类 EE 
和 FD 习 
只 夺 @: 关 本 JE 本 om: 本 
四 | 志 体 WW: 厂 ” ” 习 
把 各 高 :4 ” 司 |[ 侵 宗 5x) 本 大 小 号 介 :| | 
修饰 四): 厂 下 并 QD 古色 QO: 
上 0) 
厂 二) 
广内 煌 名 
厂 无 四 
Ca ww | mw | ww | 


图 19.70 定义 aboutus 的 行 高 属性 


19.4.5 制作 今日 新 闻 部 分 
(1) 同样 先 添加 新 的 元 素 ， 定 义 类 名 为 news， 并 设置 其 参数 如 图 19.71、 图 19.72 所 示 。 
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.news 的 C55 规则 定义 (在 mian.css 中 x| | 
he EE | | ms | [E705| 
厅 全 部 相 同 避 ) 厅 全 部 机 局 加 | EE ||| me | | 
5 | Ew he ls 到 | | 
| #© Ee | | | 可 
: 隔 习 [wx 习 || :区 习 [s 来 ow 本 = 
[入 家 px” 避 || 左 名 :四 ”本 隐 来 Gx) | 
Cue Jom | enw | wm | | 
图 19.71 设置 news 元 素 的 方 框 属性 图 19.72 设置 news 元 素 的 边框 属性 


(2) news 部 分 的 标题 可 以 使 用 关于 我 们 部 分 定义 的 样式 ， 所 以 可 以 在 拆 分 视图 的 代码 窗口 中 直 
接 “ 复 制 ”、“ 粘 贴 ”关于 我 们 的 相关 代码 ， 然 后 更 改 其 内 容 ， 此 时 ， 新 闻 标 题 显 示 效 果 如 图 19.73 
所 示 。 

(3) 从 图 19.73 可 以 看 出 ， 此 时 右 侧 文本 more 的 链接 样式 并 没有 实现 ， 其 原因 是 因为 ， 在 关于 
我 们 的 代码 中 用 子 选择 符 的 方法 限定 了 more 的 位 置 .在 样式 表 控 制 面板 中 选择 main.css 选项 , 右 击 “ 转 
到 代码 ”命令 ， 转 到 main.css 代码 页 面 ， 将 如 下 所 示 的 代码 : 

.main .right .aboutus .content_title a 

更 改 为 下 面 的 代码 : 

.content_title a 


其 中 ， 选 择 符 中 定义 的 样式 不 变 。 更 改 后 页 面 显示 效果 如 图 19.74 所 示 。 


i 


图 19.73 今日 新 闻 部 分 的 显示 效果 图 19.74 更 改选 择 符 后 的 显示 效果 


(4) 制作 新 闻 列表 部 分 ， 使 用 添加 导航 列表 相同 的 方法 添加 列表 的 内 容 。 此 时 ， 界 面 会 自动 转换 到 
拆 分 视图 , 在 代码 窗口 中 选择 ul 元素 。 定 义 类 名 为 newsnav， 同 时 定义 其 样式 如 图 19.75、 图 19.76 所 示 。 


| 

宽 中 本 内 六 me 可 浊 动 加 : 司 

高 D: 门 可 [E 了 潭 口 : 习 

全 9 | 
下 gsj ”到 | 总 来 4x) 到 || 上 名 :有 ”到 | 仿 素 6:) 到 | 
有 名 :有 ” 习 | 仿 素 64x) 可 | 右 回 : 撒 。 可 [便于 oa) 可 
Tm: dss 本 || FO: eso 习 | 
去 Ga ， 回 [ 委 素 4<》 司 | | 苦 名 = 膨 ， 汪 | 从 6: 到 | 


再 定 |] 职 | Ew | 各 | 


图 19.75 新 闻 列 表 的 方 框 属性 图 19.76 新 闻 列 表 的 列表 属性 
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(5) 选择 其 中 的 列表 内 容 ， 右 击 并 选择 “CSS 样式 ”| “新建 ”命令 ,打开 “新 建 CSS 规则 ”对 
话 框 ， 更 改 默认 选择 符 为 如 图 19.77 所 示 。 


到 
选择 器 类 型 : 玉 类 可 应 用 于 任何 标签) C) [确定 | 
个 标签 重新 定义 特定 标签 的 外 观 ) () 于 
人 高 级 ( 了 J、 伪 类 选择 器 等 )() 
选择 器 : | newsnav 1i 了 
定义 在 : 5 |nian css 了 
个 仅 对 该 文档 帮助 | 


图 19.77 定义 新 闻 列表 的 类 名 
(6) 定义 新 闻 列 表 内 容 的 样式 ， 如 图 19.78、 图 19.79、 图 19.80 所 示 。 


.newsnav i 的 C55 规则 定 多 | 划 
分 站 NR - 
A 0): 到 四 :站 可 [RS 本 和 中 : 可 
8 rrr 本 So] ml 国 
上 | 局 和 三 a 全 部 相同 人) 
Mm 可 OP 本 由 六 ex) 梧 由 上 CO 本 [ER al 
水 平 们 量 C): 二 和 元 REG 二 |] 才 @:[ 关 本 [RE || so: 站 Roy 可 
三 直 位 置 ; W 宙 =] [so 可 下 @@): 忆 ” 习 [ 侵 来 Gx 可 下 :可 JR 可 
二 az RE 
Cw |] we | mu | wy | Cama | wu 应 用 多) 帮助 
图 19.78 新 闻 列 表 内 容 的 背景 属性 图 19.79 新 闻 列 表 内 容 的 方 框 属 性 
(7) 定义 好 新 闻 列 表 属 性 后 ， 页 面 新 闻 部 分 的 显示 效果 如 图 19.81 所 示 。 
ssnav i 的 C55 规则 定义 De 
站 字体 四 Fr 
图 I 可 i: 可 
让 # 二 | 本 E29 本 
六 行商 Qn: 压 和 一 可 | 厨 本 大 全 );: 可 
人 ti 0): 厂 下 区 BO 国 今日 新 闻 
厂 上 
厂 删 隐 贱 Q) 
厂 风 星 色 
厂 无 中 
Ce] ws | maw | ww | 
19.80 新 闻 列表 内 容 的 文本 属性 图 19.81 新 闻 列表 的 显示 效果 


19.4.6 ”制作 点 拨 和 时 评 的 部 分 


点 拨 和 时 评 部 分 的 样式 基本 相同 ， 区 别 在 于 位 置 不 同 。 可 以 使 用 两 个 浮动 的 元 素 分 别 控制 两 个 部 
分 的 位 置 。 下 面 分 别 进行 制作 。 
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1. 点拨 部 分 的 制作 


(1) 添加 新 的 元 素 ， 并 定义 类 名 为 urged， 然 后 定义 元 素 的 样式 如 图 19.82、 图 19.83 所 示 。 
国 EE 
2 
视 肌 :P29 本 [去 cx 到 浪 动 四: 庄 N 节 司 接 式 ， 寓 度 尊 色 - 
丙 o 站 可 [EEEI 可 本 oO 习 万 主 部 相同 名 主 部 相同 节 ) 厅 全 部 相同 
和 所 emo | pl 7 me! me Le! CE 
上 上品 ho 到 [ 阳 素 6:) 到 | | 上 如 下 ”到 | 入 素 w) 3 右 @:EE 可 可 [eco 习 || Rm 
十 喇 : 周 可 态 6: 避 | | 有 名 :局 习 [ 太 R65 到 | a El me la | 
| | dm | ni 
a | | 
[Tm ml I | 一动 | Cm] mw | smw | Ww | 
图 19.82 urged 的 方 框 属性 图 19.83 ”urged 的 边框 属性 


(2) 标题 部 分 依然 可 以 使 用 “复制 ”、“ 粘 贴 ” 的 方法 ， 统 一 使 用 content_title 部 分 的 结构 和 样 
式 。 这 里 就 不 再 讲解 了 。 

(3) 内 容 列 表 的 制作 方法 和 新 闻 部 分 的 列表 制作 方法 类 似 ， 其 中 的 区 别 在 于 ， 背 景 和 补 白 属性 不 
同 ， 首 先 定义 点 拨 列 表 的 属性 。 选 择 ul 和 其 中 的 内 容 ， 右 击 进入 “新 建 CSS 规则 “对 话 框 ， 更 改 
默认 的 参数 如 图 19.84 所 示 。 


注意 : 这 样 更 改 的 主要 原因 是 ， 因 为 时 评 部 分 将 使 用 相同 的 列表 样式 ， 如 果 不 取 消 urged 
类 ， 则 时 评 部 分 的 列表 不 能 继承 现在 定义 的 列表 属性 。 


其 具体 的 参数 如 图 19.85、 图 19.86 所 示 。 


nan right wrged ul 的 C55 规则 定义 《在 miancss 中 划 


分 类 方 框 


E17 | | 
商 四 ) 可 [大 寺 5 了 ] 请 队 避 ): 了 
下 和 所 aa) 所 全 向 加 
到 LR 
选择 器 类 型 : 个 类 可 应 用 于 任何 标签) C) [确定 “| ED 
Ce ] 下 :所 习 几 二 
在 WW: 局 ”二 j 阳 素 Gix 


El 
计 
§ 
团团 国 
司 
车 
的 
[el 


取消 应 用 的 得 助 


19.84 列表 的 默认 参数 19.85 ”列表 的 方 框 属性 


(4) 定义 下 的 属性 ， 其 具体 参数 如 图 19.87 所 示 。 
(5) 定义 完 标题 、 列 表 属 性 后 的 页 面 显示 效果 如 图 19.88 所 示 。 
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main .right .urged ul 的 C55 规则 定义 《 在 mian.css 中国 EE 


划 
叉 
关 ac 并 可 | 
顶 目 符号 国生 Gi[ 可 | as 本 
tsowj 习 
可 "| 
可 "| 
司 | 
可 | 
Cue] ws | mmw | wm | Ca ] ww | sw |_ wy | 
图 19.86 ”列表 的 列表 属性 图 19.87 列表 内 容 的 方 框 属性 


国 证 券 点 拨 


图 19.88 点 拨 部 分 的 显示 效果 
2. 制作 时 评 部 分 
(1) 制作 时 评 部 分 浮动 的 父 元 素 。 添 加 新 的 元 素 ， 定 义 其 类 名 为 comment。 设 置 其 样式 参数 如 
图 19.89 所 示 。 
(2) 将 点 拨 部 分 的 内 容 和 结构 “复制 ”、“ 粘 贴 ” 到 comment 元 素 中 ， 更 改 相关 内 容 ， 显 示 效 果 
如 图 19.90 所 示 。 


划 
分 类 方 杠 


宽 如 :E20 可 [人 未 0=) 习 社 动 D 所 天 可 
高): 厂 习 夺 了 刁 清 除 吕 :全 二 
填充 


的 让 边界 

晤 全 部 相同 ) 全 部 相同 四 ) 
士 包 ho 到 [名 来 4x) 到 | 上 WW 到 [名 来 6x) 到 | 
有 名 : 辐 ” 习 | 仿 素 64x) 到 | 有 名 ;所 ” 悦 [ 侵 素 6x) 到 国 证 券 点 拨 more 国 证 券 时 评 
DEEP EEC | 


Ce ]_ | anmw| ww | 


图 19.89 comment 元 素 的 方 框 属性 图 19.90 点拨 和 时 评 部 分 的 显示 效果 


(3) 同样 因为 使 用 了 浮动 元 素 ， 所 以 还 要 使 用 清除 浮动 的 元 素 。 添 加 新 的 元 素 ， 在 “插入 Div 标 
签 ” 对 话 框 的 类 下 拉 子 菜单 中 选择 clear 类 ， 制 作 好 清除 浮动 元 素 。 
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19.4.7 制作 合作 伙伴 部 分 


合作 伙伴 部 分 的 制作 分 为 以 下 儿 个 部 分 。 
1. 制作 合作 伙伴 部 分 的 父 元 素 


添加 新 的 div 


Lpartnership 的 cs 规则 定义 《在 mian.css 中 让 Ea| 


元 素 ， 定 义 类 名 为 partnership， 并 定义 其 样式 如 图 19.91、 图 19.92 所 示 。 


| | a i 
让 oO:「 习 JR WO:  ， 习 太 全 到 相同 订 全 部 相同 万 全 部 相同 中 

BE 机 zm 可 IF [wm || rns 

a 和 人 Rw | 

||| Ee | : - Ps 
有 如 -加 ”加 |[ 咏 末 5x) 到 右 @: 加 习 [B 于 ow 本 : ee | ee 
EEC Ts ER 相 | ee 
CSICE 


图 19.91 
因为 partnership 元 素 中 含有 文本 ， 所 以 还 要 定义 行 高 属性 ， 其 参数 如 图 19.93 所 示 。 
2. 内 容 的 制作 
(1) 添加 标题 图 片 ， 并 定义 其 浮动 属性 为 left， 右 边界 属性 为 20px。 


(2) 然后 添 
图 19.94 所 示 。 


取消 EY 帮助 Lb 网 用 的 于 
partnership 元 素 的 方 框 属性 图 19.92 ”partnership 元 素 的 边框 属性 


加 合作 伙伴 的 内 容 部 分 ， 并 使 用 换行 符 <br /> 进行 分 隔 。 此 时 ， 页 面 的 显示 效果 如 


partnership 的 C55 规则 定义 《在 miancss 中 | 


到 
大 小 人 本 [BR 可 粗细 中 :「 司 
EF # 式 0 站 可 去 to 站 可 
和 有 高); 2 。 芭 [ 合 来 oo 本 大小 写 国 可 本 
人 tb): 厂 政信 MeO 
上 OD) 
厂 册 队 如 
厂 关 烁 如 
厂 无 中 
职 少 应 用 () 才 助 
图 19.93 ”定义 partnership 元 素 中 的 文本 属性 图 19.94 合作 伙伴 的 显示 效果 


(3) 从 图 19.94 可 以 看 出 ， 此 时 的 主要 问题 是 ， 每 行 的 开头 部 分 的 链接 颜色 没有 改变 。 所 以 要 重 
新 定义 这 个 部 分 的 链接 样式 。 选 择 每 行 开头 的 链接 和 内 容 ， 然 后 添加 新 的 样式 ， 定 义 类 名 为 


partnership_head, 


同时 设置 样式 如 图 19.95 所 示 。 


选择 其 他 的 内 容 ， 应 用 相同 的 样式 ， 制 作 好 每 行 开 头 内 容 的 链接 颜色 。 
因为 左右 两 侧 的 left 和 right 元 素 也 使 用 了 浮动 属性 ， 所 以 还 要 添加 一 个 相应 的 清除 浮动 元 素 。 
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本 
E> 
ss 可 
大 小 GG) J J Ww 了 
Mi 相 Raw[F 可 
OF FIRST 可 
人 Sh) FR OD [Fl 
a BC): Cee 
三 
Fy 
三 无 吃 
Ce]_ mm | mw ww | 


图 19.95 定义 新 的 链接 样式 
19.5 制作 首页 的 底部 


首页 的 底部 相对 来 说 比较 简单 一 些 ， 主 要 由 背景 和 居中 的 内 容 组 成 ， 其 效果 如 图 19.96 所 示 。 


图 19.96 底部 的 效果 图 
(1) 制作 底部 的 父 元 素 ， 定 义 类 名 为 footer， 其 样式 如 图 19.97 一 图 19.100 所 示 。 


Jooter 的 555 规则 定 义 《 在 miancss 中 划 | 
分 的 E23] Ez 
字体 到 ): 了 
zh I mw 的 
国 Ho 可 GO 可 乓 | 
下 ET ee er | 
修 吉 员 ); 厂 下 2% 晤 0 WED rm 水 二 位置 四 大 5 元 可 [ES 可 
厂 上 0) 直下 位 置 W | 区 而 | EE 
厂 出 逐 战 已) 
厂 六 昨 名 
三 元 咯 
Cue sn | snw | ww | Ce mw | enw |_ ww | 
图 19.97 footer 元 素 的 文本 属性 图 19.98 footer 元 素 的 背景 属性 
| 加 
力 惟 


EEC 工 林 了 


CE 到 洁 蛤 名 了 
-二 


TT 


厂 全 部 | 同名 2 

上 WW Fo 司 [ 夺 me 到 上 WD 局” 到) 本 
右 @:「 可 隔 We 本 | 右 名 [可 可 [ss 可 
TF: 7 Fw | 
让 中- A | 


Ce _w | mw | ww | Ce we | snw | 动 | 
19.99 ”footer 元 素 的 方 框 属性 19.100 ”footer 元 素 的 区 块 属性 
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(2) 在 footer 元 素 中 添加 内 容 ， 首 页 底部 就 制作 完成 了 。 
19.6 首页 的 兼容 问题 


以 上 的 制作 过 程 都 是 在 下 6.0 下 进行 的 , 制作 好 的 首页 在 Firefox2.0 中 的 显示 效果 如 图 19.101 所 示 。 


图 19.101 首页 在 Firefox2.0 中 的 显示 效果 
从 图 19.101 中 可 以 看 到 ， 此 时 存在 的 显示 问题 出 现在 中 间 证 券 点 拨 和 证 券 时 评 的 部 分 。 根 据 前 面 
章节 学 习 的 知识 可 以 知道 ， 此 时 的 问题 应 该 是 下 6.0 中 浮动 元 素 的 双边 界 问 题 造 成 的 。 解 决 的 办 法 有 
两 个 ， 一 个 是 更 改元 素 的 间隔 属性 ， 即 使 用 父 元 素 的 padding 属性 代替 子 元 素 的 margin 属性 。 另 一 个 
解决 办 法 是 使 用 !impirtant 声明 。 
【代码 19-3】 下 面 使 用 !impirtant 声明 ， 来 解决 现在 的 兼容 问题 。 首 先 看 一 下 此 时 相关 的 CSS 样 
式 代码 ， 如 程序 19.3 所 示 。 


程序 19.3 相关 的 CSS 样 式 代码 


01 .urged{ 

02 padding: 10px; 
03 width: 220px; 
04 float:left; 

05 border: 1px solid #798FAB; 
06 margin: 5px; 
O77 

08 .comment{ 

09 padding: 10px; 
10 margin:5px; 

有 float: right; 
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12 border: 1px solid #798FAB; 
413 width: 220px; 
Te 


【代码 19-4】 此 时 要 更 改 的 部 分 是 两 个 元 素 的 margin 属性 ， 要 使 得 在 下 6.0 和 Firefox 浏览 器 中 
的 边 距 相 同 ， 更 改 后 的 代码 如 程序 19.4 所 示 。 


程序 19.4 相关 的 CSS 样 式 代码 


01 .urged{ 

02 padding: 10px; 

03 width: 220px:; 

04 float:left; 

05 border: 1px solid #798FAB; 
06 margin-left:10px !important; 
07 margin: 5px; 

08 } 

09 .comment { 

10 padding: 10px; 

11 margin-right:10px limportant; 
12 margin:5px; 

13 float: right; 

14 border: 1px solid #798FAB; 
15 width: 220px; 

二 


【深入 学 习 】 程 序 19.3 和 程序 19.4 实现 的 是 相同 的 功能 ， 不 过 程序 19.4 更 完整 ， 其 第 6 行 和 第 
11 行使 得 下 6.0 中 和 Firefox 浏览 器 中 的 边 距 相 同 。 


19.7 二 级 页 面 的 制作 


从 效果 图 中 可 以 看 出 ， 首 页 和 二 级 页 面 的 头 部 、 左 侧 、 底 部 都 是 相同 的 ， 所 以 只 需要 更 改 首页 右 
侧 内 容 部 分 即 可 。 二 级 页 面 的 中 间 内 容 部 分 的 效果 图 如 图 19.102 所 示 。 


CE 


19.102 二 级 页 面 的 中 间 内 容 部 分 的 效果 图 
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从 图 19.102 可 以 看 出 ， 此 时 右 侧 内 容 部 分 是 一 个 新 闻 列表 ， 其 标题 和 新 闻 列 表 内 容 的 样式 都 与 首 
页 的 相同 ， 所 以 可 以 使 用 首页 的 样式 。 

(1) 将 首页 另存 为 newsroom.html 页 ， 注 意 更 改 页 面 标题 。 

(2) 将 首页 右 侧 的 无 关内 容 删 除 ， 删 除 后 的 页 面 显示 效果 如 图 19.103 所 示 。 


图 19.103 删除 右 侧 内 容 后 的 显示 效果 


(3) 将 “关于 我 们 ”修改 成 “今日 新 闻 ”, 并 添加 相关 的 新 闻 列 表 。 定义 列表 ul 的 样式 为 newsnav， 
页 面 的 显示 效果 如 图 19.104 所 示 。 


加 关于 我 们 


图 19.104 ”使 用 newsnav 列表 属性 后 的 效果 


(4) 制作 分 页 部 分 。 同 样 先 添加 一 个 div 元 素 ， 定 义 其 类 名 为 page。 定 义 其 方 框 属性 参数 如 
图 19.105 所 示 。 

(5) 添加 分 页 的 内 容 ， 同 时 添加 select 表单 。 添 加 select 表单 的 方法 是 ， 选 择 “ 插 入 ”|“ 表 单 ”| 
“列表 /菜单 ”命令 ， 添 加 表单 。 

(6) 选择 表单 添加 样式 ， 定 义 类 名 为 select， 其 具体 参数 如 图 19.106 所 示 。 
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习 
谁 
寅 WW -| J33w 
言 m: 厂 习 [m 了 刁 寺 OT El 
这 办 
记 相同 全 厅 全 训 相同 下) 
Wm [Bw | 上 0: J 
| CE 上 六 用 有 | 


Ce]_ 是 | amw| ww | 
图 19.105 ”定义 page 元 素 的 方 框 属性 图 19.106 定义 表单 的 样式 
(7) 定义 完 以 上 样式 后 ， 页 面 的 显示 效果 如 图 19.107 所 示 。 


图 19.107 二 级 页 面 最 终 的 显示 效果 
(8) 将 页 面 在 Firefox2.0 中 测试 ， 没 有 兼容 问题 。 


19.8 人 小 结 


如 果 说 前 面 的 实例 全 部 手写 代码 让 你 很 头疼 ， 那 本 章 的 制作 方式 就 有 点 太 简 单 了 。Dreamweaver 
俗称 网 页 剑客 ， 是 专门 用 来 制作 网 页 的 工具 。 本 章 依据 第 18 章 的 制作 思路 ， 通 过 Dreamweaver 进行 一 
些 设置 ， 可 以 自动 生成 网 页 所 需要 的 HTML 代码 和 CSS 代码 。 学 习 完 本 章 后 ， 读 者 会 发 现 ， 拥 有 一 个 
开发 工具 可 以 更 方便 、 更 快捷 地 制作 网 站 。 
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A.1 HTMIL 4.0 快速 参考 


HTML 虽然 比较 简单 ， 但 它 的 标签 名 称 和 属性 都 是 固定 的 ， 不 像 XML 那样 可 以 自己 定义 ， 本 附 
录 给 出 了 HTML 元 素 所 具有 的 通用 属性 ， 供 读者 参考 。 


A.1.1 通用 属性 


通用 属性 说 了 明 
ID 属性 为 文档 中 的 元 素 指定 了 一 个 独一无二 的 身份 标识 ， 用 于 样式 表 和 脚本 引用 。 在 定义 ID 属性 时 ， 

必须 注意 此 属性 值 由 英文 字母 开头 ， 后 面 可 以 跟 任意 字母 《大写 A 一 2Z 和 小 写 a8 一 z) 、 数 字 〈0 一 9) 、 
ID 连 字符 〈-) 、 下 划 线 (_) 、 冒 号 〈:) 以 及 点 号 (.) 
注意 : ZD 属 性 与 NAME 属 性 使 用 相同 的 名 称 空间 ， 因 此 不 能 在 同一 个 文档 中 为 ID 和 NAME 属 性 定义 
相同 的 名 称 ， 以 防止 发 生 混乱 
Class 属 性 定义 了 特定 标记 符 的 类 ， 用 于 样式 表 和 脚本 引用 。 使 用 Class 属 性 可 以 为 标记 符 定义 类 别 ， 
此 时 可 以 说 该 标记 符 是 属于 该 类 别 的 。 一 个 类 别 中 也 可 以 包含 多 个 标记 符 

Style Style 属 性 用 于 为 一 个 单独 的 标记 符 指定 样式 ， 也 就 是 指定 行内 样式 Cinline style, 也 称 为 直 插 式样 式 ) 
Title 属 性 与 TITLE 标 记 符 不 同 TITLE 标记 符 在 文档 中 只 能 出 现 一 次 ) ， 它 可 以 为 文档 中 任意 多 个 标 
Title 记 符 指定 参考 标题 信息 。 通 常 ， 浏 览 器 将 参考 标题 信息 以 即时 提示 〈tooltip， 也 称 为 工具 栏 提示 ) 的 
方式 显示 出 来 ， 以 便 浏 览 者 查看 


A.1.2 ”HTML 文档 结构 元 素 


Class 


语 法 常用 属性 说 明 
<HIML | 二 开始 标记 符 和 结束 标记 符 都 可 以 省 略 。HTML 标记 
<HIML> 符 说 明 此 文档 是 一 个 HTMI 文 档 
开始 标记 符 和 结束 标记 符 都 可 以 省 略 。 HEAD 元 素 
A 包含 文档 的 头 部 信息 ， 如 标题 、 关 键 字 、 说 明和 样 
a 无 式 表 等 。 一 般 位 于 <HTML> 标 记 之 后 ，<BODY> 
标记 之 前 。 对 于 框架 文档 ， 位 于 <FRAMESET> 标 
记 之 前 
口 、BACKGROUND-URL (文档 的 背景 图 像 ) 汪汪 加 符 和 后 束 标 下 生机 本 肌 作 90w 天 末 
口 ”BGCOLOR=Color (文档 的 背景 色 ) 由 外 六 粕 体 ， 旺 瑟 征文 全 的 正六 
<BODY> 口 TEXT_Color (文档 中 文本 的 颜色 ) 对 于 非 框架 文档 ， BODY 位 于 HEAD 之 后 ; 
</BODY> 口 。 LINK_Color (文档 中 链接 的 颜色 ) 对 于 框架 文档 , reheat 则 
口 。 VLINK-Color (文档 中 已 被 访问 过 的 链接 的 颜色 ) 下 人 


语 法 常用 属性 说 有明 
ALINK=Color (文档 中 活动 链接 的 颜色 ) 
<BODY> ONLOAD=Script (文档 加 载 时 执行 脚本 的 事件 ) 
</BODY> 
TITLE 标 记 符 位 于 HEAD 标 记 符 内 ， 它 包含 
<TITLE> 的 内 容 是 文档 的 标题 。 每 个 文档 在 HEAD 中 
</TITLE> 有 且 仅 有 一 个 TTTLE。TITLE 标 记 符 中 包含 


的 内 容 将 在 浏览 器 的 标题 栏 中 显示 

META 标 记 符 中 包含 了 网 页 的 元 数据 信息 ， 
诸如 文档 关键 字 、 作 者 信息 等 。 文 档 的 
HEAD 标 记 符 内 可 以 包含 任意 数量 的 


NAME=name (名 字 ) 
<META> HTTP-EQUIV=Name (HTTP 相应 标题 名 ) 
CONTENT=CDATA (相关 数据 ) 


DIV 标记 符 用 于 包含 行内 元 素 ( 也 称 为 字符 级 
元 素 或 文本 级 元 素 ) 和 块 级 元 素 ， 以 便 定 义 


ALIGN=[left | center | right | justify] (水 平 对 齐 EU 


<DIV> 方式 ) 合 使 用 以 便 在 样式 表 中 为 某 一 块 内 容 定义 
</DIV> 通用 属性 样式 。 如 果 不 使 用 样式 表 , DIV 标 记 符 常用 于 
设置 段落 对 齐 。 例 如 ，<DIV align=center> 
</DIV> 可 以 为 包含 在 其 中 的 内 容 设 置 居中 对 
齐 ( 与 <CENTER></CENTER> 相 同 ) 
SPAN 标 记 符 与 DIV 标 记 符 类 似 ， 但 通常 用 
于 包含 行内 元 素 。 例 如 ， 如 果 定义 了 以 下 
<SPAN> 样式 : red{colorred}， 则 可 以 使 用 以 下 语 
</SPAN> 句 为 部 分 文本 设置 红色 : 
<P> 部 分 为 <SPAN class="Ted"> 红 色 </SPAN> 
的 文本 </P> 
SH 口 En (水 平 对 齐 HI~H6 元 素 用 于 定义 从 1] 级 到 6 级 标量 ， 可 
i 口 ”通用 属性 以 使 用 align 属 性 设置 标题 的 对 齐 方式 
<ADDRESS> | 通用 属性 此 标记 符 用 于 提供 联系 信息 ， 通 常用 斜体 
</ADDRESS> 字 显 示 其 中 的 内 容 
A.1.3 文本 元 素 
语 法 说 明 
ABBR 元 素 用 来 标记 缩写 , 通常 与 tile 属 性 一 起 使 用 。 例如， 
<ABBR> <ABBR title="Structured Query Language”>SQL </ABBR>, 
</ABBR> 则 当 浏 览 者 将 鼠标 移动 到 SQL 字 样 上 时 ， 将 显示 即时 提示 


“ Structured Query Language” 


* 3s 


二” HrML+css 网 页 设计 指南 


常用 属性 


续 表 
说 明 


CITE=URL (引用 源 ) 
通用 属性 


ACRONYM 元 素 被 用 来 标记 首 字母 缩 略 词 。 
与 ABBR 元 素 类 似 ， 它 常常 与 title 属 性 一 起 使 
用 .例如 ,<ACRONYM title="Structured Query 
Language”>SQL</ACRONYM> 
BLOCKQUOTE 元 素 定义 了 一 个 块 引用 , 其 中 
可 以 包含 块 级 元 素 (如 P 和 TABLE) 。 表 示 
<BLOCKQUOTE></BLOCKQUOTE> 中 包含 
的 内 容 是 引 自 cite 属 性 所 指定 的 源 ( 例 如 , http: 


//www.microsoft.com) 


语 法 
<ACRONYM> 
通用 属性 
</ACRONYM> 
<BLOCKQUOTE> 口 
< 人 /BLOCKQUOTE> 口 
口 
<BR> 
口 
<CITE> 、 
通用 属性 
</CITE> 
<CODE> 、 
通用 属性 
</CODE> 
口 
<DEL> 
</DEL> 口 
口 
<DFN>...</DFN> ”| 通用 属性 
<EM> 证 
通用 属性 
</EM> 
口 
i 口 
<] > 
口 
口 
口 


CLEAR=[left | all | right lnone ] (清除 


浮动 对 象 ) 
通用 属性 


CITE=URL (包含 删除 原因 信息 的 


URL) 


DATETIME=Datetime (删除 时 间 ) 


通用 属性 


ALIGN=[left | center | right] (指定 水 


平 对 齐 方式 ) 
NOSHADE ( 实 线 ) 
SIZE=Pixels( 线 宽 ) 


WIDTH=Length ( 线 长 ) 


通用 属性 


。364 。 


<BR> 标 记 符 用 于 强行 中 断 当 前 行 , 多 个 <BR> 
标记 符 可 以 创建 多 个 空 行 。<BR> 标 记 符 通常 
用 于 简单 的 格式 设置 

CITE 元 素 用 以 标记 引用 内 容 ， 诸 如 杂志 报纸 
的 标题 等 .浏览 器 一 般 将 <CITE></CITE> 中 的 
内 容 显示 为 斜体 字 

CODE 元 素 用 于 标记 文档 中 的 代码 ,通常 , 浏 
览 器 将 <CODE></CODE> 中 的 内 容 显 示 为 等 
宽 字 体 

DEL 元 素 用 来 标记 文档 中 已 删除 的 内 容 , 可 以 
用 title 属 性 给 出 简单 的 删除 原因 。 通 常 ， 浏 览 
器 将 包含 在 <DEL></DEL> 中 的 文字 添加 上 删 
除 线 。 为 确保 在 多 数 浏览 器 中 都 可 以 有 删除 线 
效果 ， 也 可 以 结合 使 用 STRIKE 或 S 元 素 。 例 
如 ,以 下 语句 可 以 确保 在 多 数 浏览 器 上 显示 下 
划 线 效果 : 

<DEL cite="www.mysite.com/book title="* Sold 
out> <H3><S>《HTML4 教 程 》</S></H3> 
</DEL> 

DFN 元 素 用 于 指定 一 个 定义 ,在 浏览 器 中 通常 
用 斜体 字 显示 

EM 元 素 用 于 对 其 中 包含 的 内 容 进 行 强调 ， 通 
常 浏览 器 用 斜体 字 显 示 <EM></EM> 中 包含 
的 内 容 。 也 可 以 使 用 样式 表 为 其 指定 特殊 效果 


HR 元 素 用 于 在 网 页 中 添加 一 条 水 平 线 


附录 A 


续 表 
语 法 常用 属性 说 明 
je 口 i ee hoe ciel 
_ 线 显示 <IN: S> o 
SN E ee (搬入 时 间 》 | 可 以 自 定义 样式 表 ， 以 便 指定 特定 的 显示 格式 
KBD>_<kBD> | 通用 属性 KBD 元 素 用 于 包含 键 盘 录 入 的 文字 ， 在 浏览 
器 中 通常 以 等 宽 字 体 显示 
-> a rk pe A 结束 标记 符 可 以 省 略 , 但 使 用 样式 表 时 要 使 用 
</P> 口 ”通用 属性 结束 标记 符 。P 元 素 用 于 在 网 页 中 分 段 
PRE 元 素 用 于 包含 预先 格式 化 的 文本 。 也 就 是 
Ce ee Ee 说 ， 包 含 在 <PRE>< PRE> 中 的 内 容 将 以 所 设 
置 的 格式 显示 
Q 元 素 用 于 表示 短 的 行内 引用 。 如 果 需 要 表示 
<Q> 口 ”CITE=URL (引用 源 ) 更 长 的 引用 ,应 使 用 BLOCKQUOTE 元 素 。 由 
</Q> 口 ”通用 属性 于 一 般 的 浏览 器 并 不 支持 此 元 素 , 因此 需要 用 
样式 表 指定 该 元 素 的 格式 
SAMP 元 素 标记 了 网 页 中 的 输出 样本 , 如 程序 
<SAMP> 通用 属性 的 输出 。 通 常 ， 浏览 器 将 <SAMP></SAMP> 
</SAMP> 中 的 文字 以 等 宽 字体 显示 。 用 户 也 可 以 用 样式 
表 自 定义 该 元 素 的 样式 
STRONG 元 素 用 于 对 包含 在 其 中 的 内 容 进行 
<STRONG> 通用 属性 强调 ， 浏 览 器 通常 用 粗 体 字 显示 包含 在 
</STRONG> <STRONG></STRONG> 中 的 内 容 。 用 户 也 可 
以 用 样式 表 来 规定 显示 样式 
<SUB>...</SUB> | 通用 属性 SUB 元 素 用 于 定义 下 标 
<SUP>...</SUP> | 通用 属性 SUP 元 素 用 于 定义 上 标 
ye VAR 元 素 用 于 标记 变量 或 程序 参数 。 浏览 器 
ey 通用 属性 通常 用 斜体 字 显 示 包 含 在 <VAR></VAR> 中 
的 文字 。 也 可 以 用 样式 表 自 定义 该 元 素 的 样式 


A.1.4 字体 样式 元 素 


语 法 
<B>..</B> | 通用 属性 

口 ”SIZE=CDATA (指定 默认 字体 大 小 ， 
范围 为 1 一 7， 默 认 值 是 3) 
COLOR=Color( 指 定 默认 字体 颜色 ) 
FACE=CDATA (指定 默认 字体 ) 
ID=D (唯一 的 人 D) 
通用 属性 


常用 属性 说 了 明 


B 元 素 可 以 使 文本 以 粗 体形 式 出 现 


BASEFONT 元 素 允 许 作 者 规定 基本 字体 的 大 
小 、 颜 色 和 “字体 ”。 但 由 于 样式 表 的 出 现 ， 
在 HTML 4 中 它 是 已 过 时 的 用 法 


<BASEFONT> 


[m= 晤 = 时 | 


<BIG>...</BIG> BIG 元 素 规定 文本 以 大 字体 显示 


-Ms 


二” HrML+css 网 页 设计 指南 


续 表 
语 法 常用 属性 说 明 
口 “SIZE=CDATA (字体 大 小 调整 ) eS 
y FONT 元 素 用 于 设置 所 包含 字体 的 大 小 、 颜 色 和 
<FONT> 口 COLOR-Color (字体 颜色 调整 7 “字体 ”。 由 于 样式 表单 的 出 现 ，FONT 元 素 在 
</FONT> 口 FACE=CDATA (字体 样式 调整 ) 4 中 属 已 过 时 的 用 法 
口 、 通 用 属性 人 机 
<P>..</P> 口 ” 通 用 属性 I 元 素 规 定 文本 以 斜体 显示 
a 口 、 通 用 属性 5 元素 规 定 文本 以 包 全 删 除 线 的 方式 显示 ,效果 
与 STRIKE 元 素 相同 
ee 口 “通用 属性 SMALL 元 素 规定 文本 以 小 字体 显示 
</SMAIT> 
<STRIKE> 口 ”通用 属性 STRIKE 元 素 规定 文本 显示 时 加 删除 线 ， 效果 与 S 
</STRIKE> 元 素 相 同 
本 TD 口 “通用 属性 TI 元 素 规定 文本 以 电报 文字 体 或 等 宽 字体 显示 
<U>.</U> 口 ” 通用 属性 TU 元 素 规定 文本 显示 时 加 下 划 线 
A.1.5 “列表 元 素 
语 法 说 有明 
口 TYPE=[disc | square | circle] (编号 
<UL> 样式 ) UL 元 素 定义 了 一 个 无 序列 表 ， 其 中 包含 一 个 
</UL> 口 COMPACT (紧凑 显示 ) 或 多 个 LI 元 素来 定义 实际 的 列表 项 
口 ” 通 用 属性 
<or> 口 TYpB-flalAlilI] (编号 方式 ) 。 | 0 元素 定义 了 个 有 序列 表 。 OL 元 于 中 包 全 
on 口 ”START-Number (起 始 数 ) 个 或 多 个 LI 元 素来 定义 实际 的 列表 项 ,与 无 
序列 表 不 同 ， 列 表 项 有 一 个 明确 的 顺序 
口 “COMPACT (紧凑 显示 ) 
口 ”通用 属性 表 项 由 浏览 器 自动 编号 
OD “TYPE=[ disc | square | circle|1la|Ali 
<L> |I] (列表 项 标记 样式 ) 结束 标记 可 以 省 略 ， 但 使 用 样式 表 时 应 使 用 
<L> 口 ”VALUE=Number (序列 号 ) 结束 标记 。LI 元 素 定 义 了 一 个 列表 项 
口 ” 通 用 属性 
DL 元 素 定义 了 一 个 定义 列表 。 定 义 列表 中 的 
<DL> 口 ”COMPACT (紧凑 显示 ) 条 目 是 通过 使 用 DT 元 素 和 DD 元 素 创建 的 。 
</DL> 口 ”通用 属性 DT 元 素 给 出 了 术语 名 , 而 DD 元 素 给 出 了 术语 
的 定义 
Ee 结束 标记 可 以 省 略 ， 但 使 用 样式 表 时 应 使 用 
结束 标记 。DT 元 素 在 定义 列表 中 定义 了 一 个 
</DT> 术语 
本 结束 标记 可 以 省 略 ， 但 使 用 样式 表 时 应 使 用 
Da 结束 标记 。DD 元 素 在 定义 列表 中 为 一 个 术语 


提供 定义 数据 


常用 属性 


说 了 明 


COMPACT (紧凑 显示 ) 
通用 属性 


COMPACT (紧凑 显示 ) 


DIR 元 素 定义 了 一 个 目录 列表 ， 其 中 包含 一 个 
或 多 个 定义 实际 列表 项 的 LI 元 素 。 此 时 ，LI 元 
素 中 不 可 包含 块 级 元 素 。 在 HIML 4.0 中 ,DIR 
元 素 已 被 UL 元 素 取代 

MENU 元 素 定义 了 一 个 菜单 列表 , 其 中 包含 一 
个 或 多 个 LI 元 素来 定义 实际 菜单 项 。 此 时 ，LI 


通用 属性 元 素 中 不 应 包含 块 级 元 素 。MENU 元 素 在 
HTML 4.0 中 属 过 时 的 用 法 
A.1.6 表格 元 素 
语 法 常用 属性 说 了 明 
口 ”SUMMARY=Text (表格 说 明 ) 
口 “WIDTH=Length ( 表 宽 ) 
口 ”BORDER=Pixels (边框 宽度 ) 3 二 
<TABLE> 口 “FRAME=[void | above | below | hsides | Ihs | rhs | nd do eo 
. gs 格 中 的 内 容 都 应 包含 在 <TABLE> 
</TABLE> vsides | box | border]〔 外 边框 ) PS 
口 ”RULES=[none | groups | rows | cols | all] (表格 框 线 ) 
口 ”CELLSPACING=Length (单元 格 间距 ) 
口 ”CELLPADDING=Length (单元 格 填充 距 ) 
口 ”ALIGN=[left | center |right] (表格 对 齐 ) 
口 ”BGCOLOR=Color (表格 背景 色 ) 
口 “通用 属性 
n CAPTION 元 素 定义 了 表格 的 标题 ， 
9 a | bottom | left | right] (对 齐 方式 ) 使 用 时 CAPTION 标 记 符 必须 放 在 
表格 最 开头 〈 即 <TABLE> 之 后 ) 
口 ”ALIGN=[ left | center | right | justify | char] (组 中 单 | THEAD 元 素 定义 了 表格 的 表 头 , 一 
元 格 的 水 平 对 齐 方式 ) 个 表格 中 最 多 可 含有 一 个 THEAD 
口 ”CHAR=Character (单元 格 之 间 的 对 齐 字符 ) 标记 符 。 使 用 时 ，THEAD 标 记 符 必 
SHED> 口 ”CHAROFF-Length (对 齐 字符 的 偏 移 量 ) 须 跟 在 <CAPTION> 、<COL> 或 
> 口 “VALIGN=[top | middle | bottom | baseline] (组 中 单 | <COLGROUP> 后 ， 在 <TFOOT> 和 
元 格 的 垂直 对 齐 方式 ) <TBODY> 之 前 。 目前 , 多 数 浏览 器 
口 ” 通 用 属性 还 不 支持 THEAD 标 记 符 
口 ”ALIGN=[left | center | right | justify | char] (组 中 单 
元 格 的 水 平 对 齐 方式 ) TFOOT 元 素 定义 了 表格 的 脚注 行 ， 
Py 口 ”CHAR=Character (单元 格 之 间 的 对 齐 字符 ) 一 个 表格 中 最 多 可 含有 一 个 TFOOT 
口 ”CHAROFF=Length (对 齐 字符 的 偏 移 量 ) 标记 符 。TFOOT 标 记 符 必须 跟 在 
SO 口 “VALIGN=[top | middle | bottom | baseline] (组 中 单 | THEAD 后 , 在 TBODY 之 前 。 目前 多 
元 格 的 垂直 对 齐 方式 ) 数 浏览 器 还 不 支持 TFOOT 标 记 符 
口 “ 通用 属性 


”Ts 


CSS px nt 


续 表 
语 法 常用 属性 说 有明 
口 ”ALIGN=[ left | center | right | justify | char] (组 中 单元 格 的 OE 
水 平 对 齐 方式 ) 数据 行 ， 表 格 中 至 少 有 一 个 
TBODY 标 记 符 。TBODY 必 须 
口 ”CHAR=Character (单元 格 之 间 的 对 齐 字符 ) 
<TBODY> 跟 在 可 选 的 TFOOT 后 。 如 果 
口 ”CHAROFF=Length (对 齐 字符 的 偏 移 量 ) 六 
SBD 口 。 VALIGN-[top | middle | bottom | baseline] (组 中 单元 格 的 | 表格 中 仅 有 一 个 TBODY， 且 
垂直 对 齐 方式 ) 不 含 THEAD 和 TFOOT， 则 
4 TBODY 的 起 始 和 结尾 标记 可 
口 ”通用 属性 4 
省 略 
口 “SPAN=Number (组 的 列 数 ) 
口 ”WIDTH=MultiLength (每 列 宽度 ) 
口 ”ALIGN=[ left | center | right | justify | char] (组 中 单元 格 的 | COLGROUP 元 素 定义 了 一 个 
水 平 对 齐 方式 ) 表格 中 的 列 组 。 使 用 列 组 时 ， 
本 口 ”CHAR=Character (单元 格 之 间 的 对 齐 字符 ) COLGROUP 元 素 必须 放 在 可 
COLGROUP> 口 ”CHAROFF=Length (对 齐 字符 的 偏 移 量 ) 选 的 CAPTION 元 素 之 后 ， 且 
口 ”VALIGN=[ top | middle | bottom | baseline]( 组 中 单元 格 的 | 在 可 选 的 THEAD 元 素 之 前 
垂直 对 齐 方式 ) 
口 ” 通 用 属性 
COL 元 素 定义 了 一 个 表格 列 
口 ”SPAN=Number ( 列 数 ) 的 属性 。 如 果 使 用 此 元 素 , 则 
口 ” ”WIDTH=MultiLength ( 列 宽度 ) 必须 放 在 可 选 的 CAPTION 元 
口 ”ALIGN=[ left | center | right | justify | char] ( 列 单元 格 的 水 | 素 之 后 ， 且 在 可 选 的 THEAD 
平 对 齐 方式 ) 元 素 之 前 。 与 COLGROUP 不 
<COL> 口 “CHAR=Character (单元 格 之 间 的 对 齐 字符 ) 同 , COL 并 不 在 结构 上 将 表格 
口 ”CHAROFF=Length (对 齐 字符 的 偏 移 量 ) 列 分 组 , 而 是 仅 定义 若干 表格 
口 “VALIGN=[top | middle | bottom | baseline]( 列 单元 格 的 垂 | 列 所 共享 的 属性 COL 标 记 符 
直 对 齐 方 式 ) 也 可 以 位 于 COLGROUP 标 记 
口 ”通用 属性 符 之 中 , 此 时 COL 的 属性 将 覆 
盖 COLGROUP 的 属性 
口 ”ALIGN=[ left | center | right | justify | char] (组 中 单元 格 的 TR 元 素 定义 了 一 个 表格 行 。 
水 平 对 齐 方 式 ) 人 
加 TR 必 须 出 现在 由 THEAD、 
口 “CHAR=Character (单元 格 之 间 的 对 齐 字符 ) . 
. TFOOT 或 TBODY 所 定义 的 
<TR> 口 ”CHAROFF=Length (对 齐 字符 的 偏 移 量 ) Y st 
和 二 行 组 中 。TR 标 记 符 包含 <TH> 
</TR> 口 ”VALIGN=[ top | middle | bottom | baseline]( 组 中 单元 格 的 和 <TDp> 标 记 符 ，<TH> 和 
二 直 对 齐 方式 ) <TD> 标 记 符 中 又 包含 了 表格 
口 ”BGCOLOR=Color (背景 色 ) 的 实际 数据 
口 “通用 属性 
TH 元 素 定义 了 表格 中 的 一 个 
TH> 口 ROWSPAN=Number (单元 格 所 占 的 行 数 ) 标题 单元 格 , 其 中 的 内 容 通 常 
<TH> 口 ”COLSPAN=Number (单元 格 所 占 的 列 数 ) 以 黑体 显示 。TH 标 记 符 位 于 


-0 


TR 标记 符 内 


VALIGN=[top | middle | bottom | baseline] (单元 格 的 垂直 对 齐 方式 ) 
WIDTH=Pixels (单元 格 宽 ) 

HEIGHT=Pixels (单元 格 高 ) 

NOWRAP (单元 格 内 不 换行 ) 

BGCOLOR=Color (单元 格 背景 色 ) 


续 表 

语 常用 属性 说 有明 

口 HEADERS-=IDREFS (当前 单元 格 的 标题 单元 格 列表 ) 

口 ”ABBR=Text (标题 单元 格 的 缩 略 形式 ) 

口 “SCOPE [row | col | rowgroup | colgroup] (标题 单元 格 所 覆盖 的 单元 格 数 ) 

口 ”AXIS=CDATA (标题 单元 格 类 别 ) 二 

口 ”ALIGN=[left | center | right | justify | char] (单元 格 的 水 平 对 齐 方式 ) 0 

口 “CHAR=Character (单元 格 之 间 的 对 齐 字符 ) 
TH> 单元 格 ， 其 中 的 内 

口 ”CHAROFF=Length (对 齐 字符 的 偏 移 量 ) 容 通常 以 黑体 显 
Se 口 ”VALIGN=[ top | middle | bottom | baseline] (单元 格 的 垂直 对 齐 方 式 ) 示 ,TH 标 记 符 位 于 

口 、WIDTH=Pixels (单元 格 宽 ) 0 

Sa TR 标记 符 内 

口 HEIGHT=Pixels (单元 格 高 ) 

口 NOWRAP (单元 格 内 不 换行 ) 

口 BGCOLOR=Color (单元 格 背 景色 ) 

口 ” 通 用 属性 

口 ROWSPAN=Number (单元 格 所 占 的 行 数 ) 

口 ”COLSPAN=Number (单元 格 所 占 的 列 数 ) 

口 HEADERS=IDREFS (当前 单元 格 的 标题 单元 格 列表 ) 

口 ”ABBR=Text (标题 单元 格 的 缩 略 形式 ) 

口 ”SCOPE[row | col | rowgroup | colgroup]〈 标 题 单元 格 所 覆盖 的 单元 格 数 ) 

口 ”AXIS=CDATA (标题 单元 格 类 别 ) y 

口 ”ALIGN=[left | center | right | justify | char] (单元 格 的 水 平 对 齐 方式 ) TO 让 和 于 放 
<TD> 格 中 的 一 个 数据 单 

口 ”CHAR=Character (单元 格 之 间 的 对 齐 字符 ) 9g 
Sm 口 ”CHAROFF=Length (对 齐 字符 的 偏 移 量 ) 元 格 D 标 记 符 位 

a 于 TR 标记 符 内 

口 

口 

口 

口 

口 


A.1.7 ”框架 元 素 


通用 属性 


语 法 常用 属性 说 了 明 
ROWS=MultiLengths (设置 横向 框架 ) | FRAMESET 元 素 是 一 个 框架 容器 ， 它 将 窗口 
COLS=MultiLengths《〈 设 置 纵向 框架 ) | 分 成 长 方形 的 子 区域 ， 即 框架 。 在 一 个 框架 
ONLOAD=Script (所 有 框架 载 入 时 启 | 集 文 档 中 ，<FRAMESET> 标 记 符 取 代 了 
人 动 脚本 的 事件 ) <BODY> 的 位 置 ， 而 紧 接 <HEAD> 标 记 符 之 
</FRAMESET> 


ONUNLOAD=Script (所 有 框架 卸载 时 | 后 。FRAMESET 标 记 符 中 包含 一 个 或 多 个 
启动 脚本 的 事件 ) <FRAMESET> 或 了 FRAME> 标 记 符 ， 并 可 能 
通用 属性 含有 一 个 可 选 的 <NOFRAMES> 标 记 符 


“Ms 


MUHCSS 网 页 设计 指南 


续 表 
语 法 常用 属性 说 有明 
口 NAME=CDATA (框架 名 ) 
口 ”SRC=URL (框架 的 初始 页 面 ) 
口 LONGDESC=URL (框架 的 长 篇 描述 ) FRAME 元 素 定义 了 一 个 框 
口 FRAMEBORDER=[1|0] (设置 是 否 显示 框架 边框 ) 架 ， 即 一 个 框架 集 文档 
<FRAME> 口 MARGINWIDTH=Pixels ( 边 距 宽度 ) (FRAMESET) 中 的 长 方形 空 
口 ”MARGINHEIGHT=Pixels ( 边 距 高 度 ) 间 。FRAME 标 记 符 必 须 包含 
口 ”NORESIZE (禁止 修改 框架 尺寸 ) 在 FRAMESET 标 记 符 中 
口 ”SCROLLING=[yes |no | auto] (设置 是 否 显示 滚动 条 ) 
口 “通用 属性 
NOFRAMES 元 素 中 包含 了 框 
架 不 能 被 显示 时 的 替换 内 容 。 
NOFRAMES 元素 通常 在 
<NOFRAMES> Frameset 文 档 中 使 用 ， 它 在 浏 
<NOFRAMES> | 。 口 ”通用 属性 览 器 不 支持 框架 或 框架 被 禁 
用 时 ， 提 供 相 应 的 替换 内 容 。 
NOFRAMES 标 记 符 必须 位 于 
FRAMESET 标 记 符 之 间 
口 ”SRC=URL (框架 内 容 网 页 的 URL) 
口 NAME=CDATA (框架 名 ) 
口 LONGDESC=URL (到 长 篇 描述 的 链接 ) 
口 ”WIDTH=Length (框架 宽度 ) IFRAME 元 素 定义 了 一 个 页 内 
口 ”HEIGHT=Length (框架 高 度 ) 框架 ， 可 以 在 其 中 显示 HTML 
EANE> 口 ”ALIGN=[ftop |middle | bottom | eft |right] (框架 对 齐 方式 ) | 页 面 。 包 含 在 <IFRAME> 和 
A 口 ”FRAMEBORDER=[1 | 0] (设置 是 否 显示 框架 边框 ) ”| <1FRAME> 中 的 内 容 只 有 当 
口 MARGINWIDTH=Pixels( 边 距 宽 ) 浏览 器 不 支持 框架 时 才 显示 
口 ”MARGINHEIGHT=Pixels( 边 距 高 ) 
口 ”SCROLLING=[yes |no | auto] (是 否 显示 滚动 条 ) 
口 ” 通 用 属性 
A.1.8 表单 元 素 
语 法 常用 属性 说 明 
口 “ACTION=URL (处 理 表单 结果 的 脚本 的 位 置 ) 
口 METHOD=[get | post] (发 送 表 单 的 HTTP 方法 ) 有 a 
口 ”ENCTYPE=ContentType (表单 数据 的 编码 类 型 ) ee a 0 a ee . 
<FORM> 口 ACCECT-CHARSET=Charsets (可 支持 的 字符 列表 ) 
= SELECT、 TEXTAREA 和 BUTTON 
</FORM> 口 ”TARGET=FrameTarget (显示 表单 内 容 的 框架 ) 等 控件 ， 使 用 户 能 通过 控件 与 表 
口 ”ONSUBMIT=Script (表单 发 送 时 启动 脚本 的 事件 ) 单传 递 信息 
口 ”ONRESET=Script (表单 重 置 时 启动 脚本 的 事件 ) 
口 ” 通 用 属性 


“Ss 


ONCHANGE=Script ( 当 控 件 的 值 改动 时 启动 脚本 的 事件 ) 


语 法 常用 属性 说 有明 
口 TYPE=[text|password | checkbox |radio | submit | reset | file | hidden 
| image | button] (控件 类 型 ) 
口 NAME=CDATA (控件 的 名 称 ) 
口 “VALUE=CDATA (控件 的 值 ) 
口 CHECKED (设置 单 选 按钮 或 复 选 框 的 初始 选中 状态 ) 
口 ”SIZE=CDATA (文本 框 的 宽度 ， 以 字符 数 为 单位 ) 
口 MAXLENGTH=Number (最 大 文本 输入 字符 数 ) 
口 ”SRC=URL (图 像 源 ) 
口 ”ALT=CDATA (图 像 的 替换 文本 ) 三 
口 “USEMAP-URL (客户 端 图 像 喘 射 ) 生生 
一 个 用 于 用 户 输入 
<INPUT> 口 ”ALIGN=[top | middle | bottom | left | right] (表单 元 素 的 对 齐 方式 ) 
的 表单 控件 , 通常 位 
口 ”DISABLED〔 使 控件 无 效 以 防止 输入 ) 于 FORM 标 记 符 内 
口 READONLY (设置 控件 为 只 读 ) 
口 ”ACCEPT=ContentTypes (文件 上 载 的 媒体 类 型 ) 
口 ”ACCESSKEY=Character (快捷 键 ) 
口 ”TABINDEX=Number (在 Tab 键 遍历 次 序 中 的 位 置 ) 
口 “ONFOCUS=Script ( 当 元 素 获 得 焦点 时 启动 脚本 的 事件 ) 
口 ”ONBLUR=Script ( 当 元 素 失去 焦点 时 启动 脚本 的 事件 ) 
口 ”ONSELECT=Script( 当 文本 框 中 的 部 分 文本 被 选中 时 启动 脚本 的 事件 ) 
口 ”ONCHANGE=Script( 当 控件 的 值 改动 时 启动 脚本 的 事件 ) 
口 ” 通 用 属性 
口 NAME=CDATA (控件 的 名 称 ) BUTTON 元 素 定义 
口 VALUE=CDATA (控件 的 值 ) 
了 一 个 按钮 , 可 以 是 
口 ”TYPE=[submit | reset | button] (按钮 类 型 ) 
提交 、 重 置 或 普通 按 
口 ” DISABLED (使 控件 无 效 ) 钮 。 虽然 也 可 以 用 
<BUTTON> 口 READONLY (设置 控件 为 只 读 ) INPUT 元 素 创建 按 
</BUTTON> 口 ”ACCESSKEY=Character (快捷 键 ) 钮 ， 但 用 BUTTON 
口 ”TABINDEX=Number (在 Tab 键 遍历 次 序 中 的 位 置 ) 元 素 创建 的 按钮 通 
口 ”ONFOCUS=Script( 当 元 素 获得 焦点 时 启动 脚本 的 事件 ) 常 具有 更 强 的 表 
口 ”ONBLUR=Script ( 当 元 素 失去 焦点 时 启动 脚本 的 事件 ) 现 力 
口 ” 通 用 属性 
口 NAME=CDATA (控件 的 名 称 ) 
口 ”MULTIPLE (控制 是 否 可 以 选择 多 个 选项 ) 加 
口 。 SIZE-Number (显示 出 的 菜单 框 行 数 ) on 
口 “DISABLED (使 控件 无 效 ) 其 中 包含 若干 个 
es 口 ”TABINDEX=Number (在 Tab 键 遍历 次 序 中 的 位 置 ) 
SSEDECR 口 ”ONFOCUS=Script ( 当 元 素 获得 焦点 时 启动 脚本 的 事件 ) 0 
a ONBLUR=Script ( 当 元 素 失去 焦点 时 启动 脚本 的 事件 ) i et 
口 


通用 属性 


= 
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续 表 
语 法 常用 属性 说 明 
OPTGROUP 元 素 定 
义 了 一 个 SELECT 
菜单 内 的 选项 组 ， 
其 中 至 少 包含 一 个 
口 ”LABEL=Text (组 标签 ) OPTION 元 素来 定 
OME 口 、”DISABLED (禁用 选项 组 ) 义 实际 的 选项 。 注 
OPYGROUPS 口 ”通用 属性 意 , 多数 浏览 器 并 不 
支持 OPTGROUP 元 
素 , 因此 在 使 用 选项 
菜单 时 最 好 直接 用 
OPTION 定 义 选项 
口 ”VALUE=CDATA (选项 值 ) 
i 口 ”SELECTED (初始 选择 值 ) OPTION 元 素 定 义 
口 ”DISABLED (禁用 选项 ) 了 SELECT 菜单 中 
“Re 口 、LABEL=Text (选项 标签 ) 的 菜单 选项 
口 ”通用 属性 
口 NAME=CDATA (控件 的 名 称 ) 
口 ROWS=Number (多 行文 本 框 的 行 数 ) 
口 ”COLS=Number (多 行文 本 框 的 列 数 ) 
口 ”DISABLED (使 控件 无 效 ) 
口 READONLY (设置 控件 为 只 读 ) 
口 ”ACCESSKEY=Character (快捷 键 ) TEXTAREA 元 素 定 
“DETAREA> 口 TABINDEX=Number (在 Tab 键 遍历 次 序 中 的 位 置 ) 义 了 一 个 多 行文 本 
人 口 ”ONFOCUS=Script ( 当 元 素 获得 焦点 时 启动 脚本 的 事件 ) 框 控件 
口 ”ONBLUR=Script ( 当 元 素 失去 焦点 时 启动 脚本 的 事件 ) 
口 ”ONSELECT=Script( 当 文本 框 中 的 某 些 文本 被 选中 时 启动 脚本 的 
事件 ) 
口 ”ONCHANGE=Script ( 当 控 件 的 值 改动 时 启动 脚本 的 事件 ) 
口 ” 通 用 属性 
ISINDEX 元 素 定义 
本 了 一 个 单行 文本 输 
<ISINDEX> pe 合生 作息 7 入 框 。 在 HTML4 
中 ， 它 已 被 INPUT 
元 素 取代 
口 ”FOR=IDREF (相关 表单 控件 的 ID) 
口 “ACCESSKEY=Character (快捷 键 ) LABEL 元 素 将 一 个 
URE 口 ”ONFOCUS=Script (元 素 获得 焦点 时 启动 脚本 的 事件 ) 表单 控件 和 一 个 标 
SBS 口 ”ONBLUR=Script (元 素 失去 焦点 时 启动 脚本 的 事件 ) 签 联系 起 来 
口 ” 通 用 属性 


ss 


续 表 

语 法 常用 属性 说 明 
FIELDSET 元 素 定义 了 
一 个 表单 控件 组 。 通 过 
将 相关 联 的 控件 分 组 ， 
可 以 把 表单 分 为 更 小 、 
更 易于 管理 的 部 分 ， 以 
避免 出 现 用 户 无 法 使 用 
<FIELDSET> i 过 于 繁多 的 控件 的 情况 
FIELDSET> A (注意 ， 并 非 所 有 浏览 
器 都 支持 FIELDSET 元 
素 ) 。 在 FIELDSET 标 记 
符 中 应 包含 作为 控件 组 
成 员 的 各 表单 控件 ， 并 
需要 使 用 LEGEND 标 记 
符 创 建 一 个 控件 组 标签 
LEGEND 元 素 定义 了 
一 个 控件 组 的 标签 ， 


口 ”ACCESSKEY=Character (快捷 键 ) 


<LEGEND> 口 ALIGNrftop |bottom | lef| ghj (标签 文字 相对 于 控件 组 的 对 且 必 须 立即 出 现在 
</LEGEND> 0 <FIELDSET> 标记 符 
口 之 后 
A.1.9 其 他 元 素 


HREF=URL (链接 的 目标 文件 位 置 ) 
NAME=CDATA (已 命名 的 链接 目标 ) 

REL=LinkTypes (到 链接 的 关系 ) 

REV=LinkTypes (来 自 链接 的 关系 ) 

TYPE=ContentType (链接 的 内 容 类 型 ) 
TARGET=FrameTarget (显示 链接 的 目标 框架 ) 
HREFLANG=LanguageCode (链接 目标 文件 的 语言 ) 
CHARSET=Charset (链接 的 字符 编码 ) 
ACCESSKEY=Character〔 快 捷 键 ) 

TABINDEX=Number (Tab 键 遍历 次 序 中 的 位 置 ) 
SHAPE=[rect | circle | poly | default] (客户 端 图 像 映射 中 映 
射 区 域 的 形状 7 

COORDS=Coords 客户 端 图 像 映射 中 映射 区 域 的 坐标 ) 
ONFOCUS=Script (元素 获 得 焦点 时 启动 脚本 的 事件 ) 
ONBLUR=Script (元 素 失 去 焦点 时 启动 脚本 的 事件 ) 

通用 属性 


A 元 素 定义 了 一 个 超 链接 使 用 
href 属 性 时 ) 或 者 一 个 超 链接 的 
目的 位 置 〈 使 用 name 属 性 时 ) 。 
当 定义 超 链 接 时 ， 位 于 <A> 和 
</A> 之 间 的 内 容 成 为 超 链接 的 
源 , 浏览 者 可 以 单 击 超 链接 源 跳 
转 到 超 链接 目标 


DEDODDO0O0oGnAD 


DOoo 
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续 表 
语 法 常用 属性 说 明 
口 CODE=CDATA (类 文件 名 称 或 路 径 ) 
口 “CODEBASE=URL (类 文件 的 基础 URL) 
口 ” ”WIDTH=Length (小 程序 在 网 页 中 所 占 的 宽度 ) 
口 “HEIGHT=Length (小 程序 在 网 页 中 所 占 的 高 度 ) APPLET 元 素 用 来 嵌入 一 个 
口 ARCHIVE=URL-LIST (存档 文件 所 在 的 位 置 列 表 ) Java 小 程序 (Applet) 。 在 
口 OBJECT=CDATA (序列 化 的 小 程序 》 HIML4.0 中 ， 建 议 使 用 
PHBT> 口 ”NAME=CDATA (小 程序 实例 的 名 称 ， 用 于 小 程序 间 通 信 ) | OBJECT 元 素 代替 APPLET 
SAN 口 ”ALT=Text (替换 文本 ) 元 素 。 使 用 APPLET 标 记 符 
口 ”ALIGN=[top | middle | bottom | left | right] 小 程序 在 页 面 的 | 时 ， 可 以 用 PARAM 标记 符 
对 齐 方式 ) 指定 运行 时 参数 
口 ”HSPACE=Pixels (小 程序 对 象 左右 的 空白 距离 
口 ”VSPACE=Pixels (小 程序 对 象 上 下 的 空白 距离 ) 
口 ” 通 用 属性 
口 ”SHAPE=[rect | circle | poly | default] (客户 端 图 像 映射 中 映射 
区 域 的 形状 ) 
口 ” COORDS=Coords (客户 端 图 像 映 射 中 映射 区 域 的 坐标 ) 
口 ” HREF=URL (链接 的 目标 文件 位 置 ) S 
口 ”TARGET=FrameTarget (显示 链接 的 目标 框架 ) ee 的 
<AREA> DD NOHREF (不 包含 链接 域 。AREA 标 记 符 位 于 MAP 
口 ALT=Text (替换 文本 ) 标记 符 内 
口 ”TABINDEX=Number (Tab 键 遍历 次 序 中 的 位 置 ) 
口 “ONFOCUS=Script (元素 获得 焦点 时 启动 脚本 的 事件 ) 
口 ”ONBLUR=Script (元 素 失去 焦点 时 启动 脚本 的 事件 ) 
口 ” 通 用 属性 
BASE 元 素 定义 了 文档 的 默 
认 URL 基 准 和 默认 目标 杠 
口 ”HREF=URL (默认 URL 基准 ) 架 。 一 个 文档 中 最 多 有 一 个 
0 口 “TARGEF-FrameTarget (默认 目标 框架 ) BASE 标 记 符 ， 而 且 如 果 使 
用 ， 则 必须 位 于 HEAD 标 记 
符 内 
BDO 元 素 覆 盖 了 所 包含 文 
口 DIR=[ltr |rd] (文本 的 方向 ) 本 的 双向 算法 。BDO 元 素 用 
DO> 口 、LANG-LanguageCode (文本 的 语言 ) 于 设置 多 语言 文本 的 显示 方 
ER 口 ”通用 属性 向 ， 在 一 般 的 网 页 中 并 不 
常用 
CENTER 元 素 定义 了 一 个 居 
中 对 齐 的 块 。 在 HIML 4.0 
0 口 ”通用 属性 中 ， 它 属 过 时 的 用 法 ， 通 党 
</CENTER> 


.374 。 


用 DIV align=center></DIV> 
代替 


续 表 
语 法 常用 属性 说 有明 
口 ”SRC=URL (图 像 源 的 位 置 ) 
口 ”ALT=Text (替换 文本 ) 
口 LONGDESC=URL (包含 长 篇 描述 的 文档 位 置 ) 
口 “WIDTH=Length (图 像 宽度 ) 
口 HEIGHT=Length (图 像 高 度 ) 
口 USEMAP-URL (客户 端 图 像 映射 的 映射 说 明 ， 对 应 于 MAP IMG 元 素 定 义 了 一 个 行内 
<IMG> 元 素 指定 的 内 容 ) 图 像 
口 IJSMAP (指示 使 用 服务 器 端 图 像 映 射 7 
口 ALIGN=top | middle | bottom | left | right (图 像 对 齐 方式 ) 
口 “BORDER=Length〔 图 像 边框 的 宽度 ) 
口 “HSPACE=Pixels〈 图 像 左右 的 空白 距离 ) 
口 “VSPACE=Pixels〈 图 像 上 下 的 空白 距离 ) 
口 ” 通 用 属性 
口 ”REL=LinkTypes (到 链接 的 关系 ) 
口 REV=LinkTypes (来 自 链接 的 关系 ) 
口 ”HREF=URL (链接 资源 的 URL) 
口 “TYPE=ContentType (链接 的 内 容 类 型 ) i 
<LINK> 口 ”TARGET=FrameTarget (显示 链接 的 目标 框架 ) 含 在 HEAD 标 记 符 内 , 并 且 
口 “MEDIA=MediaDesc (链接 的 媒体 ) 可 以 有 多 个 
口 ”HREFLANG=LanguageCode (链接 资源 的 语言 ) 
口 ”CHARSET=Charset (链接 资源 的 字符 编码 ) 
口 ” 通 用 属性 
MAP 元 素 用 于 定义 图 像 映 
射 的 区 域 信息 。MAP 的 不 
可 缺 省 的 NAME 属 性 通常 
<MAP> 口 NAME=CDATA (图 像 映射 的 名 称 ) 用 作 IMG 或 OBJECT 标 记 
</IMAP> 口 ”通用 属性 符 的 USEMAP 属 性 的 值 。 
MAP 标 记 符 内 包含 多 个 
AREA 标 记 符 , 用 于 定义 图 
像 上 可 单 击 的 区 域 
NOSCRIPT 元 素 为 不 执行 
客户 端 程序 的 浏览 器 提供 
了 替代 的 显示 内 容 。 
NOSCRIPT 标 记 符 应 紧 跟 
口 ”通用 属性 在 它 所 提供 替换 内 容 的 
SNOPES SCRIPT 标 记 符 后 。 只 有 当 
浏览 器 不 支持 客户 端 程序 


* 


时 ， 才 显示 <NOSCRIPT> 
</NOSCRIPT> 中 的 内 容 


css min 和 


续 表 
语 法 常用 属性 说 明 
OBJECT 元 素 在 网 页 中 定义 了 
一 个 对 象 。 这 个 对 象 可 以 是 图 
口 DATA=URL (对 象 数 据 的 位 置 ) 像 、Java 小 程序 、ActiveX 控 件 、 
口 “CLASSID=URL (实现 位 置 ) 多 媒体 等 各 种 对 象 。 使 用 
口 ”ARCHIVE=-CDATA (存档 文件 ) OBJECT 定义 对 象 时 ， 还 可 以 用 
口 “CODEBASE=URL (CLASSID、DATA、ARCHIVE 的 基 | PARAM 标记 符 为 对 象 指定 运行 
准 URL) 时 参数 。 在 HIML 4.0 中 ， 建 议 
口 ”WIDTH=Length (对 象 宽度 ) 用 通用 的 OBJECT 元 素 取 代 更 
口 ”HEIGHT=Length (对 象 高 度 ) 为 特殊 的 IMG、APPLET 等 元 
口 ”NAME=CDATA( 如 果 对 象 在 表单 中 提交 , 则 定义 其 名 称 ) | 素 。 不 过 ， 使 用 OBJECT 代替 所 
口 USEMAP=UAL (定义 使 用 的 客户 端 图 像 映射 7 有 其 他 对 象 元 素 (如 IMG、 
ee 口 TYPE-ContentType (对 象 内 容 类 型 ) APPLET 等 ) 的 用 法 目前 还 没有 
口 ”CODETYPE=ContentType (代码 内 容 类 型 ) 得 到 多 数 浏览 器 的 支持 
口 ”STANDBY=Text (装载 时 显示 的 信息 ) 为 确保 浏览 器 的 支持 , 通常 使 用 
口 TABINDEX=NUMBER (在 Tab 键 遍历 顺序 中 的 位 置 ) 嵌 套 的 OBJECT 元 素 包 含 多 个 
口 DECLARE (声明 一 个 对 象 而 不 启动 它 ) 对 象 , 以 便当 浏览 器 无 法 显示 外 
口 ALIGN=[top | middle | bottom | left | right] (对 象 对 齐 方式 ) | 层 对 象 时 , 依次 尝试 显示 内 层 对 
口 “BORDER=Length (对 象 边 框 宽度 ) 象 。 如 果 浏 览 器 无 法 显示 Python 
口 ”HSPACE=Pixels (对 象 左 右 的 空白 距离 ) 小 程序 ， 则 尝试 显示 MPEG 视 
口 ”VSPACE=Pixels (对 象 上 下 的 空白 距离 》 频 ; 如 果 仍然 无 法 显示 MPEG 视 
口 ”通用 属 件 频 ， 则 尝试 显示 GIF 图 像 ， 如 果 
仍然 无 法 显示 GIF 图 像 ， 则 显示 
文本 
PARAM 元 素 指 定 了 对 象 在 运行 
Sn 时 需要 的 一 系列 值 。 在 OBJECT 
或 APPLET 标 记 符 中 可 以 以 任 
口 “VALUETYPE=[data |ref|object]( 值 的 类 型 ) 
ERAN 口 ”TYPE=ContentType ( 当 valuetype=ref 时 ， 指 定 值 的 内 容 人 全 
2 
本 时 , 对 象 必须 能 识别 所 指 
口 “ID=ID (元 素 的 ID) 参数 名 和 值 
SCRIPT 元 素 在 文档 中 包含 一 段 
口 ”TYPE=ContentType (编程 语言 的 内 容 类 型 ) 客户 端 脚本 程序 。 客户 端 脚本 程 
口 “LANGUAGE=CDATA (编程 语言 名 ) 序 能 使 文档 更 好 地 对 客户 端的 
口 ”SRC=URL (外 部 程序 位 置 ) 事件 作出 反应 。 例如, 一 段 程序 
<SCRIPT> 口 “CHARSET=Charset (外 部 程序 的 字符 编码 ) 可 以 在 用 户 发 送 所 填写 的 表单 
</SCRIPT> 口 DEFER (设置 此 布尔 属性 时 ， 表 示 告 知 浏览 器 脚本 并 不 | 之 前 先 检查 用 户 填写 的 内 容 , 并 
产生 任何 文档 内 容 (例如, 在 JavaScript 中 没有 "document. | 立即 通知 用 户 填 写 错 误 。 
write" 语 句 ) ， 从 而 使 浏览 器 可 以 继续 解释 HTML 文件 的 | SCRIPT 标 记 符 可 以 位 于 文档 中 


内 容 并 进行 显示 ) 


:Ds 


的 任何 位 置 , 但 通常 位 于 HEAD 
标记 符 内 ， 以 便于 维护 


说 了 明 


STYLE 元 素 用 于 在 文档 中 嵌入 样式 表 。 
文档 的 HEAD 标 记 符 中 可 以 包含 任意 数 
量 的 STYLE 标记 符 。 对 于 层 玛 样式 表 
口 “TYPE=ContentType (样式 语言 的 类 型 ) (CSS) ，TYPE 属 性 的 值 是 text/css。 定 
口 “MEDIA=MediaDesc (应 用 样式 的 媒体 ) 义 样式 表 时 ， 样 式 表 项 的 形式 为 ， 
口 TITLE=Text (样式 表 的 名 字 ) Selector{property1: valuel:property2: 
value2;.….}， 其 中 ，Selector 可 以 是 HTML 
标记 、 样 式 类 、 样 式 ID 等 ，property 是 由 
CSS 定 义 的 属性 ， 是 属性 对 应 的 值 


A.2 CSS 中 支持 的 颜色 名 称 


在 本 书 中 设置 颜色 时 提 到 过 ， 可 以 使 用 颜色 的 英文 名 称 来 设置 颜色 效果 。 本 附录 给 出 在 CSS 中 可 
以 使 用 的 颜色 名 称 、 颜 色 代 码 以 及 颜色 的 效果 。 


A.2.1 W3C 规定 的 十 六 色 


W3C 就 是 World Wide Web Consortium， 全 球 万 维 网 联盟 的 简称 。 它 研究 Web 规范 和 指导 方针 ， 
致力 于 推动 Web 发 展 ， 保 证 各 种 Web 技术 能 很 好 地 协同 工作 。W3C 规定 的 十 六 色 如 表 A.1 所 示 。 


表 A.1 W3C 规 定 的 十 六 色 


颜色 的 英文 名 称 中 文 含义 十 进 制 RGB 颜色 值 
black 四 #000000 
white 白 255.255.255 
red 红 255.0.0 
yellow 黄 255.255.0 
lime 酸 橙色 0.255.0 
aqua 浅 绿色 0.255.255 
blue 蓝 0.0.255 
fuchsia 紫红 色 255.0.255 
gray 灰色 128,128.128 
silver 银色 #COCOC0 192.192.192 
maroon 栗色 128.0.0 
olive 橄榄 色 #808000 128.128.0 
green 绿色 0.128.0 
teal 水 鸭 色 0.128.128 
navy 海军 蓝 0.0.128 
purple 紫色 128.0.128 
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A.2.2 网络 安全 色 


Web 颜色 只 有 216 色 ， 所 以 网 络 上 安全 色 就 是 指 Web 所 能 反映 、 所 能 支持 的 216 色 。 这 里 给 出 
表 A.2 是 为 了 让 读者 更 清楚 网 络 中 可 以 正常 显示 的 颜色 ， 从 而 在 创建 网 页 时 选择 更 加 合适 的 色彩 。 


网 络 安 全 色 的 十 六 进 制 颜色 码 都 是 可 以 被 33 整除 的 值 ， 如 #330066、#CC0099 等 。 


十 六 进 制 颜色 码 | 十 进 制 RGB 颜 色 值 | 颜色 效果 


表 A.2 网络 安全 色 


十 六 进 制 颜色 码 


十 进 制 RGB 颜 色 值 


#000000 0.0.0 #990000 153.0.0 
#000033 0.0.51 #990033 153.0.51 
#000066 0.0.102 #990066 153.0.102 
#000099 0.0.153 #990099 153.0.153 


#0000CC 
#0000FF 
#003300 
#003333 
#003366, 
#003399 
#0033CC 
#0033FF 
#006600 
#006633 
#006666 
#006699 
#0066CC 
#0066FF 
#009900 
#009933 


0.0.204 #9900CC 


| 00255 | | | #00rF | 
0.51.0 | 图 #993300 

| osls | | | #93333 | 

| os | | | #093366 | 

| oss | | | | 903399 | 
0.51.204 | | | #9933CC 

| os12s5 | | | | 933rF | 

| oo | 996600 | 
0.102.51 | | 图 #996633 
0.102.102 | | 国 #996666 


| op1s3 | | | | #996699 | 
| oaox2o | | | | 96ece | 
0.102.255 | | 图 #9966FF 
[oo | | | #099900 | 
| 05sl | | | | 9909033 | 


153.0.204 
153,0,255 
153.51.0 
153.51.51 
153.51.102 
153.51.153 
153.51.204 
4353.51255 
153.102.0 
153.102.51 
153.102.102 
153.102.153 
153.102.204 
153.102.255 
153.153.0 
153.153.51 


#009966 0.153.102 #999966 153.153.102 
#009999 0.153.153 #999999 153.153.153 
#0099CC 0.153.204 #9999CC 153.153.204 
#0099FF 0.153.255 #9999FF 153.153.255 
#00CC00 0.204.0 #99CCO0 153.204.0 | 
#00CC33 0.204.51 j99CC33 153.204.51 [el] 
#00CC66 0.204.102 #99CC66 153.204.102 [ed 
#00CC99 0.204.153 #99CC99 153.204.153 1] 
#00CCCC 0.204.204 #9CCCC 153.204.204 [| 
#00CCFF 0.204.255 #99CCFF 153.204.255 [| 
#00FF00 0.255.0 #99FF00 153.255.0 [| 
#00rF33 | 0255! | | | | oorrss | 153255;s1 Ei 


ss 


204.0.204 


续 表 
十 六 进 制 颜色 码 | 十 进 制 RGB 颜色 值 十 六 进 制 颜色 码 十 进 制 RGB 颜色 值 

#00FF66 0.255.102 #9FF66 153.255.102 [| 
#00FF99 0.255.153 #99FF99 153.255.153 [| 
#00FFCC 0.255.204 #9FFCC 153.255.204 

#00FFFF 0.255.255 #99FFFF 153.255.255 

#330000 51.00 #CCO000 204.0.0 | | 
让 30033 51.0.51 #CC0033 204.0.51 [la 到 
#330066 51.0.102 HCC0066 204.0.102 | | 
反 30099 51.0.153 #CCO099 204.0.153 


#3300FF #CCOOFF 
#333300 | slsl0 | | | | #ccss00 


#333333 51,51,51 | | 加 #CC3333 
#333366 51,51,102 国 图 #CC3366 


#333399 51.51.153 | 转 #CC3399 


#3333CC 


51.51.204 | | #CC33CC 
5 | | | 


#3333FF SL, #CC33FF 
#336600 $1.10: | | | | #CC6600 
#336633 | sll0251 | | 国 
#336666 S1.102.102 | | 面 #CC6666 


#33669 | 51L102153 | | | 
f3366CC | sl102204 | | 国 
#3366FF | sl102255 | | 国 
#339900 | sis30 | | | 
#339933 | 5l15351 | | 国 


204.0.255 
204.51.0 
204.51.51 
204.51.102 
204.51.153 
204.51.204 
204,51,255 
204.102.0 
204.102.51 
204.102.102 
204.102.153 
204.102.204 
204.102.255 
204.153.0 
204.153.51 


#339966 51.153.102 #CC9966 204.153.102 
#339999 51,153.,153 #CC9999 | 204.153.153 
#3399CC 51.153.204 #CC99CC 204.153,204 
#3399FF S1153 .255 #CC9FF 204.153,255 


#33CCO0 51.204.0 #CCCCO0 


204.204.0 


#33CC33 51.204.51 #CCCC33 204.204.51 
#33CC66 51.204.102 #CCCC66 204.204.102 
#33CC99 51.204,153 #CCCC99 204.204.153 
#33CCCC 51.204.204 #CCCCCC 204.204.204 
#33CCFF 51,204,255 #CCCCFF 204.204.255 
#33FFO00 51,255,0 204.255.0 
#33FF33 S1255,51 204,255.51 
#33FF66 51,255,102 204.255.102 
#33FF99 S255 153 204:255:153 


“Ms 
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十 六 进 制 颜色 码 | 十 进 制 RGB 颜 色 值 


十 六 进 制 颜色 码 


十 进 制 RGB 颜色 值 


全 
中 
海 
酒 


#663333 
#663366 


#3FFCC 51.255.204 #CCFFCC 204.255.204 

#33FFFF 51.255.255 #CCFFFF 204.255.255 

#660000 102.0.0 大 F0000 255.00 [il 

#660033 102.0.51 FF0033 255.0.51 [| 

#660066 102.0.102 255.0.102 | | 

#660099 102.0.153 255.0.153 Le 

#6600CC 102.0.204 255.0.204 [| 

#6600FF 102.0.255 255.0.255 

#663300 255.51.0 [| 
el 


#EF3333 255.51.51 


#663399 
#6633CC 
#6633FF 
#666600 
#666633 
#666666 
#666699 
#6666CC 
#6666FF 
#669900 
#669933 
#669966 
#669999 


| 255,51.153 
|  #EF33CC | 255.,51.204 
| os12ss | | 国 255.51 
| 1021020 | | 国 255.102.0 
| 10210251 | | 面 255.102.51 
| 102102102 | | 图 255.102.102 
102.102.153 | | 国 255.102.153 
| 102102204 | | 国 255.102.204 
| 102102255 | | | 255.102. 
102.153.0 | | | | ao | 255,153.0 
| 10215351 | | | | #rFo933 | 255.153.51 
| 102153102 | | | | i#rF9966 | 255.153.102 
| 102153153 | | 加 255.153.153 


#6699CC 102.,153.204 255.153,204 
#6699FF 102.153.255 #FF99FF 255,153,255, 
#66CC00 102.204.0 #FFCC00 255.204,0 
#66CC33 102.204.51 #FFCC33 255.204.51 


#66CC66 


102.204.102 255.204.102 


#66CC99 


102.204.153 255,.204,153 


#66CCCC 255,204,204 
#66CCFF 255,204,255 
#66FF00 2553:255.0 

#66FF33 255,255,51 

#66FF66 102.255.102 255,255,102 
#66FF99 102,255.153 255,255,153 
#66FFCC 102.255.204 255,255,204 
#66FFFF 102,255,255 255,255,255 
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A.2.3 ”IE 4 以 上 版 本 中 的 预 命名 颜色 


在 正 4 以 上 的 版 本 的 浏览 器 中 ， 有 一 些 颜色 可 以 直接 采用 英文 名 称 来 设置 ， 表 A.3 给 出 的 颜色 就 
是 到 目前 为 止 ， 可 以 直接 通过 颜色 英文 名 称 设置 ， 并 能 在 正 4 以 上 版 本 的 浏览 器 中 正常 显示 的 颜色 。 
表 A.3 在 IE 4 以 上 版 本 中 预 命名 的 颜色 
颜色 的 英文 名 称 中 文 含义 十 六 进 制 颜色 码 十 进 制 RGB 颜色 值 


EE 
中 
湾 
酒 


aliceblue 艾 利 斯 蓝 #FOF8FF 240.248.255 
antiquewhite 古董 白 #FAEBD7 250.235.215 
aqua 蓝 绿色 、 浅 绿色 #00FFFF 0.255.255 


aquamarine 碧绿 色 #7FFFD4 127.255.212 
azure 天 蓝 色 #EOFFFF 240.255.255 
beige 米色 考 SF5DC 245,245.220 


Wi 


bisque 桔 黄色 考 FE4C4 255.228.196 

black 黑色 #000000 0.0.0 
blanchedalmond 白 杏 色 
blue 蓝 色 0.0.255 


blueviolet 蓝 色 紫 罗兰 
brown 神色 
burlywood 实木 色 
cadetblue 军 蓝 色 | sme | sm 
charteuse 黄 绿色 
chocolate 巧克力 色 
coral 珊瑚 色 
comflowerblue 菊 蓝 色 
comsilk 米利 色 


crimson 深 红色 #DC143C 


an 蓝 绿色 、 青 色 # O00FFFF 
= 
darkcyan 深 青色 #008B8B, 


darkgoldenrod 暗 金色 #B8860B, 184.134.11 
darkgray 深 灰色 #A9A9A9 169.169.169 
darkgreen 深 绿色 #006400 0.100.0 
darkkhaki 深 褐 色 #BDB76B 189.183.107 
darkmagenta 暗 红 紫 色 #8BOO8B 139.0.139 
darkolivegreen 深 橄 槛 绿色 #556B2F 85.107.47 
darkorange 暗 桔 黄色 FF8C00 255.140.0 
darkorchid 深 紫 色 #9932CC 153.50.204 
darkred 上 暗 红色 #8B0000 139.0.0 


darksalmon, 暗 肉色 #E9967A 133.150.122 
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续 表 
颜色 的 英文 名 称 中 文 含义 十 六 进 制 颜色 码 十 进 制 RGB 颜色 值 | 颜色 效果 
darkseagreen 深 灰 绿色 #8FBCSB 143.188.139 [El 
darkslateblue 深海 蓝 色 #483D8B, 72.61.139 [到 二 
darkslategray 暗 瓦 灰色 #2F4F4F 47.79.79 
darkturquoise 深 宝石 蓝 #00CED1 0.206.209 [| 
darkviolet 暗 紫罗兰 色 #9400D3 148.0.211 Eee 
deeppink 深 粉 红色 #EF1493 255.20.147 [|] 
deepskyblue 暗 天 蓝 色 #00BFFF 0.191.255 | 
dimpra 暗 灰 色 #696969 105.105.105 
dodgerblue 内 灰色 [本 
firebrick 火 砖 色 #B22222 
floralwhite 花白 三 FFAF0 255.250.240 
forestgreen 森林 绿 #228B22 34.139.34 [| 


fuchsia 
gainsboro 
ghostwhite 
gold 
goldenrod 
ara; 

green 
greenyellow 


honeydew 
hotpink 


indianred 


紫红 色 
淡 灰色 
幽灵 白 
金色 

金 击 刨 色 
灰色 
绿色 

黄 绿 色 


蜜 白色 
热 粉红 色 
印第安 红 


#FFOOFF 
#DCDCDC 
#E8FSFF 


255.0.255 


255.215.0 


#FD700 


sd 
indigo 靛青 色 #4B0082 75.0.130 
ivory 象牙 色 #EFFFFO 255.255.240 
khaki 黄 褐色 #0E68C 240.230.140 
lavender 藤 衣 草 色 、 淡 紫色 #E6E6FA 230.230.250 
lavenderblush 淡 紫 红色 #EFFOFS 255.240.245 
lawngreen 草绿 色 #7CFCO0 124.252.0 
lemonchiffon 柠 榜 稠 色 #FFFACD 
lightblue 亮 蓝 色 #ADD8E6 
lightcoral 亮 珊瑚 色 #08080 [i 
lightcyan 亮 灰 色 
lightgoldenrodyellow 亮 金 黄色 
lightgreen 亮 绿色 144.238.144 
lightgrey 亮 灰 色 加 3D3D3 211,211,211 
lightpink 亮 粉色 故 FB6C1 255.182.193 
lightsalmon 亮 柠檬 色 帮 FAO7A 255.160.122 
lightseagreen 亮 水 绿色 #20B2AA 32.178.170 


“382。 
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颜色 的 英文 名 称 中 文 含义 十 六 进 制 颜色 码 十 进 制 RGB 颜色 值 
lightskyblue 亮 天 蓝 色 #87CEFA 135.206.250 [| 
lightslategray 亮 瓦 灰色 #778899 119.136.153 [ | 
lightsteelblue 亮 金属 色 #B0C4DE 176196.222 [| 
lightyellow 亮 黄色 #FFFE0 255.255.224 ee] 
lime 酸 栖 色 #0OFF00 0.255.0 | 
limegreen 橙 绿色 #32CD32 50.205.50 人 
linen 证 AFOE6 250.240.230 [ | 
Inasgenta 
maroon [| 
[| 


mediumblue 


中 绿 玉 色 
中 蓝 色 


mediumorchid 


mediumpurple 
Imediumseagreen 
mediumslateblue 
mediumspringereen 
mediumturquoise 
mediumvioletred 
midnightblue 
mintcream 
mistyrose 
moccasin 
navajowhite 

Da 


中 粉 紫色 
中 紫色 

中 灰 绿 色 
中 暗 蓝 色 
春 绿色 
中 绿 宝石 色 
中 紫罗兰 色 
中 灰 蓝 色 
薄荷 色 

浅 玫瑰 色 
鹿 皮 色 

纳 瓦 白 
海军 蓝 


三 三 三 

#BASSD3 186.85,211 
#9370DB 
#3CB371 
#7B68EE 
#00FA9A, 
#48D1CC 
#C71585 
#191970 
#ESFFFA, 
#FFE4El 
HEFE4B5 


#000080 0.0.128 


oldlace 老 旧 纺 色 #FDFSE6 253.245.230 
olive 橄榄 色 #808000 128.128.0 
olivedrab 深 绿 褐色 #6B8E23 107.142.35 
orange 橙色 #EFA500 255.165.0 
orangered 红 检 色 #EF4500 255.69.0 


orchid 


淡 紫 色 


#DA70D6 218.112.214 


WN 


Palegoldenrod 苍 麒 麟 色 #EEESAA 238.232.170 
palegreen, 苍 绿 色 #98FB98 LD 52 
palevioletred 苍 紫 罗兰 色 #DB7093 219.112.147 
papayawhip 番 木 色 在 FEFD5 255.239.213 
peachpuff 桃色 #FDAB9 255.218.185 
peru 秘鲁 色 #CD853F 205.133.65 
pink 粉红 色 考 FCOCB， 255,192,203 
plum 洋 李 色 #DDAODD 221.160.221 


时 ”TMtcss 网 页 设计 指南 


颜色 的 英文 名 称 中 文 含义 十 六 进 制 颜色 码 十 进 制 RGB 颜色 值 

Powderblue 粉 蓝 色 #BOEOE6 176.224.230 | 
purple 紫色 #800080 128.0.128 je | 
Ted 红色 #FF0000 255.0.0 下 
rosybrown 褐 玫瑰 红 #BC8FSF 188.143.143 [ | 
royalblue 皇家 蓝 #4169E1 65.105.225 | | 
saddlebrown 重 褐色 #8B4513 139.69.19 | 
salmon 鲜 肉 色 邦 A8072 250.128.114 [| 
sandybrown 沙 褐色 244.164.96 | 
seagreen 海 绿色 | 
seashell 海 贝 色 25 238 

silver 银色 192.192.192 

skyblue 天 蓝 色 号 2 

slateblue 石 蓝 色 


Slategra 灰 石 色 
SnoW 雪白 色 
春 绿色 
steelblue 钢 兰 色 
tan 茶色 

teal 水 鸭 色 
thistle 葡 花 色 


Springgreen 


tomato 西红柿 色 
turquoise 青绿 色 
violet 紫 罗 
wheat 浅黄 色 


0.128.128 


135.206.235 


#40E0DO 64.224.208 
#EES82EE 238.130.238, 


诈 SDEB3 245,222,179 


white 白色 #EFFFFF 255,255,255 
whitesmoke 烟 白色 #E5FSFS 245.245.245， 
yellow 黄色 #EFFF00 255.255.0 

ellowgreen #9ACD32 154.205.50 


.384 。 


